Views: Styling output

by Gisle Hannemyr

This chapter describes how to control the appearance of the content accumulations created using the Views module. It also tells you have to alter the default Frontpage view.

Table of contents

Introduction

The Views module let the site designer create and present accumulated lists of contents. This chapter is about styling the appearance of those lists.

Using built-in functions

Views have some built-in functions to style the output. For instance, you can specify what strings to use for titles, add a prefix and a suffix to a field, define a header and a footer for a view, and how to display (or not) fileds that have no result. You can also alter the appearance of a field by rewriting the result, using replacement tokens. These functions are more or less self-explanatory and will not be discussed further in this chapter.

Using template overrides [D7]

[Needs to be updated for Drupal 9. Views no longer provide theme suggestions the idea now is to enable theme debugging.]

If the built-in functions are not sufficient, there is a general mechanism for overriding default display templates that can also be used to create customised views.

See alsoThe display template override mechanism discussed below is not part of the Views module. Template overrides are part of Drupal's general theming framework, and will be discussed in more detail in the chapter about subtheming. The override mechanism is however very useful when we want custom styling of particular views.

To override templates, you first need to know what templates is currently used, and what you are allowed to call the replacements. To find, out this, expand the third column (“Advanced”) in the view editor, and click on the link to theme “Information”. This will show a modal popup a list of template files, in the following order:

Each list is ordered roughly from the least specific to the most specific. The active template for each – which is the most specific template found on the system – is highlighted in bold.

For instance, for our “blogpages” view, the list of templates for the User: Name field may in the Page display may initially look like this:

Field User: Name (ID: name):
views-view-field.html.twig,
views-view-field--name.html.twig,
views-view-field--blogpages.html.twig,
views-view-field--blogpages--name.html.twig,
views-view-field--page.html.twig,
views-view-field--page--name.html.twig,
views-view-field--blogpages--page.html.twig,
views-view-field--blogpages--page--name.html.twig,
views-view-field--page-1.html.twig,
views-view-field--page-1--name.html.twig,
views-view-field--blogpages--page-1.html.twig,
views-view-field--blogpages--page-1--name.html.twig

Here, the first entry (views-view-field.html.twig) is shown in boldface and is the active template. This is a generic template. The generic templates are located in the theme subdirectory of the root directory of the Views project. The rest does not exist (yet).

To override this, you first need to review the list of potential overrides, and decide on what level you want the override to take place. If you want to override the styling of all name fields, then you should create an override file named views-view-field--name.html.twig. If you want to be specific, and restrict this to names appearing on the blogpages view, you pick views-view-field--blogpages--name.html.twig, and so on.

Let us say you opt for the latter. In that case you must first make a copy of the current active template (views-view-field.html.twig), and name this copy views-view-field--blogpages--name.html.twig in the templates directory of your'site's subtheme. You must press Rescan template files (located in the theme “Information” modal popup) to make Drupal look for template overrides. If everything went well, the override file you created should now be boldfaced, as shown in the example below.

Field User: Name (ID: name):
views-view-field.html.twig,
views-view-field--name.html.twig,
views-view-field--blogpages.html.twig,
views-view-field--blogpages--name.html.twig,
views-view-field--page.html.twig,
views-view-field--page--name.html.twig,
views-view-field--blogpages--page.html.twig,
views-view-field--blogpages--page--name.html.twig,
views-view-field--page-1.html.twig,
views-view-field--page-1--name.html.twig,
views-view-field--blogpages--page-1.html.twig,
views-view-field--blogpages--page-1--name.html.twig

After you verifyed that Drupal is able to locate your template override file, you can go ahead and edit this copy and incorporate any changes you want to incorporate in the template. For instance, you could change: 

<?php print $output; ?>

to:

<strong><?php print $output; ?></strong>

This override would display that particular field in boldface.

noteThe template overrides listed in the theme “Information” modal popup are for various elements of the view. They cannot be used to override the page template for a view. For this, you provide need to provide a template that uses the path to the view page as part of the template name. E.g. if the path is /myview, the template file should be named page--myview.html.twig. This one of the default template suggestions, so no pre-process function is required.

tipIt is generally not considered good Drupal style to make modifications to parts of the site that you did not create yourself. The main reason for this is that this may (depending upon how you update) wipe out your modifications whenever you update your system. But even if you make sure this does not happen, it is difficult to keep track of customisation files that lives among core and contributed files. If you want to use default template overrides and you are not using a theme you created yourself, the Drupal way of doing things is to create a sub-theme to your active theme, and place your overrides in the sub-theme.

See alsoFor simple overrides, the above is what you to need to know. For more extensive guidelineds about overrides for D7, see the following external resources: Theme information, Using CSS with Views, and Using Views Templates.

Add a class to a View

To add a class to a row Format » Settings » Row class and add it.

For instance, to show some teaser nodes horizontally across the front page, you can modify the "Frontpage" view by adding the classnamed "hnmteaser" as a custom row class, and then use the following CSS to show four of them side by side:

.hnmteaser {
  float: left;
  padding: 0 0.5rem 0 0.5rem;
  width:25%;
}

To add a class to an entire View, navigate to Advanced » Other » CSS class and add it.

The above method adds the class to the View wrapper. If you need to add it somewhere else, copy the default views-view.html.twig to your theme as views-view--[viewid].html.twig add your class there.

See alsoFor twig template naming conventions for Views, see this documentation on Drupal.org.

For example, to add the Bootsrap 5 flex classes d-md-flex and justify-content-between to the part of the template rendering the row, use the following pattern:

<div class="view-content d-md-flex justify-content-between">
  {{ rows }}
</div>

Move Title under the Image on front page

Drupal ships with a view named "Frontpage" that is used to create the list of teasers that appears ob the front page. By default, it is set to show "Content".

The recipe belows assumes that you are using the core Media module for image assets.

Source: https://www.drupal.org/forum/support/post-installation/2019-01-27/move-title-under-the-image-in-a-teaser

Final word

[TBA]

Last update: 2018-10-22 [gh].