Integrating Featured Content

Integrating Featured Content

Now let's repeat what we just did with the From our blog section, with the Featured Content.

In this case we will only create one view template suggestion, only for the Featured content block views-view--blog-posts--featured-content.html.twig. Since both blocks (from-our-blog & featured-content), are part of the same view (Blog posts), and they both use the same data format of unformatted , we can use the same template for both blocks. This means views-view--unformatted--blog-posts.html.twig will serve both sections of content.

1. Make a copy of views-view.html.twig and name it views-view--blog-posts--featured-content.html.twig

2. Add the following code overriding all existing code in the template. Don't delete the comments.

view-view--blog-posts--featured-content.html.twig

{%
  set classes = [
    dom_id ? 'js-view-dom-id-' ~ dom_id,
  ]
%}

{% set attributes = attributes.addClass(classes) %}

{# Variable for the view title #}
{% set heading = {
    "heading_level": '2',
    "modifier": 'heading--large center section-header',
    "title": 'Featured content',
    "url": ''
  }
%}

{% embed '@training_theme/featured-content/featured-content.twig' %}
  {% block featured_items %}
    {{ rows }}
  {% endblock %}
{% endembed %}

• Just like we did for the From our blog integration, we are leaving the dom_id class available and adding it to the template's attributes.

• Also as we did before, we are setting a new variable for the heading or section title.

• Finally we are embedding the featured-content.twig component and printing its content inside a twig block called featured_items.

• Save your changes and clear Drupal's cache.

• Reload the homepage and you should see the Featured content section nicely styled.

If we look at the homepage we can see all the content is displaying as expected with the exception of the images in the two types of cards. We are going to fix this so all images for each type of card display consistent width and height. We are going to use the power of images styles, responsive image styles, and view modes. Let's do this now.

We don't have to do anything different with the unformatted template.

Clear Drupal's caches

Now if you reload the /news page you should see the featured content in place. There is one more thing to do for the listing of movies and we will do that next.