Movie full display
Last updated
Was this helpful?
Last updated
Was this helpful?
Now that all components to that make the homepage have been integrated, let's finalize things by integrating the movie full node. For this we'll actually make use of the Featured Movie component for the upper part of the page, but leave out the watch button and synopsis text (the synopsis text will instead be output on the lower part of the page.) We also don't have to worry about passing in Drupal attributes or title_prefix
/ title_suffix
variables since we're outputting those were the node template does it by default. Let's get started.
We are going to follow the exact same steps for using view modes as we did when we integrated the and . However, this time we're going to use the Full content view mode. Like the Teaser view mode, this is one that Drupal provides by default. It has already been enabled, but if you were enabling it on your own you would follow these steps:
If you haven't already, login to the site with admin access
Click Structure | Content Types | Movie
Click the Manage Display tab
Click the Default view mode and scroll down the page
Expand the CUSTOM DISPLAY SETTINGS fieldset
Check the Full content view mode and click Save.
Click the Full content view mode link.
Drag the following fields up outside the Disabled section: Cover Image, Promo Sentence Synopsis, Average Viewer Rating, MPAA Rating, Flag: Favorites. All other remaining fields should be moved under Disabled.
For each of the fields outside the Disabled section, change the label dropdown to Hidden.
Click Save.
So we just indicated to Drupal which fields we want to display when using the Full content view mode and which we want to hide.
The template suggestion for the Full content view mode of the movie content type has already been created for you (see: nitflex_dev_theme/src/templates/movie/node--movie--full.html.twig
). But if you were doing this on your own, follow the same steps that we took for creating the template suggestion for the Teaser view mode in the integration instructions, but this time the template suggestion should be node--movie--full.html.twig.
We are now ready to integrate the full view of a movie:
Open node--movie--full.html.twig
in your text editor
Remove all code in the file but leave all comments.
add the following code at the bottom of the template
Let's go over what we are doing here:
The next part should be familiar to you. We're basically repeating what we did for the Featured Movie component, but note that we're not including the synopsis text this time when we embed the component. This is because for the full display of a movie the synopsis text field is set up to display the full text, and not a summary, so we output that after the embed of the featured movie component.
And that's it! We already did the heavy lifting in the Featured Movie component, so integrating the full node display was a breeze. Final steps:
Clear the site's caches via the Admin Menu when logged into the site, or run lando drush cr
in the terminal.
From the homepage, click the title of any movie listed (or the Watch Now button on the featured movie.) The full view of the movie should display just like a Featured Movie at the top of the page, with the full synopsis text below.
First, as mentioned in , we're triggering a full render of the content variable.
Next, we are keeping the <article>
element as the outer wrapper for the full display of a movie, plus the attributes
Drupal provides, but we're using the addClass()
method to add our class to the ones that Drupal will output. You can learn more about this method, and others that are available for the attributes
variable on the . Note that we're also keeping the title_prefix
and title_suffix
variables.