Styling Views

In previous chapters, we’ve seen that a page (or better, the main content area of a page) can be provided by a custom controller, a node, or a form. Often, on our websites, we need to list something – for example, the latest blog post or the trips available. Every time you need to create a collection of content in a Drupal site, you’re talking about a view.

In this chapter, we’ll see how a view is structured and which templates can be overridden to provide a custom layout and style. View results can be filtered by exposing a form, typically before the list itself, and we’ll see how to style that form too.

Finally, we’ll talk about view pagers, how they work, and how to style them.

The topics in this chapter will be the following:

• View templates
• Exposed filters
• Pagers

View templates

Views are some of the most complex modules that live inside Drupal core. Until Drupal 7, it was a contrib module, and this explains why its UI it's a little bit different compared to the rest of the system.

A view is a configuration entity that can be created using the web interface of Drupal; even some basic websites have multiple views used to represent listings of any type.

Note

A configuration entity in Drupal is used to represent any complex configuration, which is usually created with the web interface and then exported into the configuration folder.

Do you need to show the latest five blog posts, ordered by creation date? You need a view. A list of the most active users on the site? A view. The books that are available on a library website? Again, a view.

Content listing provided by the Views module can then be used to populate the main content area of a page, produce blocks that can be added to a region, or generate an RSS feed. Contributed...

Exposed filters

On the configuration page of a view (for example, /admin/structure/views/view/trips/edit/all), you can set which filters to expose to the end users:

Figure 8.9 – Configuration for exposed filters

For the Trips view, we want to allow an end user to filter the results by Duration and Level. With this configuration, the Views module passes a tailor-made form to the exposed variable of the views_view theme hook.

The views_exposed_form theme hook manages the template for the filter’s form. Possible suggestions are as follows:

• views-exposed-form-trips-all.html.twig
• views-exposed-form-all.html.twig
• views-exposed-form-trips-page.html.twig
• views-exposed-form-page.html.twig
• views-exposed-form-trips.html.twig
• views-exposed-form.html.twig

Like the other theme hooks provided by Views, you have a lot of combinations to choose from when overriding the base template.

templates/views/views-exposed-form...

Pagers

Pagers are configured on the views configuration page:

Figure 8.10 – Pager configuration

In this case, the theme hook is pager, and its suggestions are the following:

• pager--trips--all.html.twig
• pager--all.html.twig
• pager--trips--page.html.twig
• pager--page.html.twig
• pager--trips.html.twig
• pager.html.twig

The pager theme hook is not used only on views; it’s a standard component that Drupal uses every time it needs to render a pagination widget. We can find the default implementation in the templates/navigation/pager.html.twig file. Replace the content with the following:

{{ include('@atoms/pager.html.twig', {
  'headingId': heading_id,
  'items': items,
  'current': current,
  'ellipses': ellipses,
}) }}

Clear the cache, refresh the /trips page, and now the Trips view is completely styled.

Summary

In this chapter, we saw how a view is structured, which theme hooks it uses, and when to render a full row or a set of fields.

We then saw which templates are used for exposed filters and pagers.

Views is a complex module, with complex templates and with hundreds of contrib modules that extend it. In this chapter, we saw only the standard templates and configurations. We’ll return to Views later in the book when we talk about rendering a set of search results.

The Views module, like many others, provides new blocks to the system (such as the ones provided by the menu system). In Chapter 9, Styling Blocks, we’ll deep-dive into how to style some of the most used block types.