From Views Field Rewriting to View modes

I have always loved the Drupal Views module, I use it to build almost everything and I am so excited that it is included in Drupal 8 Core. Primarily working as a front-end developer, I've used Views to output dynamic content, like a blog listing with image, title, teaser text and read more links, image carousels, product listings, contextual blocks showing related videos and so much more.

Having been more of a front-end and site-building "clicker" (e.g. using the Drupal Admin UI to manage display) than a "coder" (using templates for theming for finer control over the markup) in views, I often opted for using View’s “Fields” format to create my teaser listings.

Recently, creating more sites with Drupal 8, I've started using "View modes". Here is an example.

The output

In this example View of teasers, we have an icon in the top corner of the item, which has a link to that item’s content. We have a teaser image, title, paragraph text and a read more link.

Our example view output  , with three columns, icons, teaser image, title and text with readmore butotn

I've created two views. View 1 shows the “Fields” view format. View 2 will use the “Content” display format and Teaser View Mode (View 2). These are both using the unformatted list markup.

View 1: Custom Field Output.

For purposes in this example, we want more control over the markup than what the standard view fields could give us. I’ve hidden fields and rewritten the fields in a Global: Custom Text field output to include some token replacements patterns in my custom html structure.

The view, using fields, for the example

Global: Custom Html / Twig Output of hidden fields

Note: In Drupal 8, we can now use Twig syntax when we rewrite fields! Then it would be much nicer to put the template in code for git revisioning, source code highlighting etc… So on to the second example.

Rewriting a global custom text field with tokens and html markup

Code Snippet from image above:

<div class="custom-fields-wrapper">
  {% if field_image %}
    <div class="my-icon">
      <a href="linkref">{{ field_icon }}</a>
    </div>
    <div class="my-special-imagefield">
      {{ field_image }}
    </div>
  {% endif %}
  <h2 class="view-title">{{ title }}</h2>
  <p class="teaser-text">{{ body }}</p>
  {{ view_node }}
</div>

That basically gives us the View example shown above (with some CSS styling, of course).

View Modes.

If you have clicked on “Manage Display” of a content type and arranged the fields under "Default" and "Teaser", you've used View modes. Head over to /admin/structure/types/manage/article/display. There you’ll see the default View modes available.

Manage Display

View Modes helps with maintainability and theming. Using View modes instead of a view field, is a site building best practice. View modes are reusable but a view field can only be used within a single view.

View 2: View with Content format: Teaser View Mode

In this view, we’re changing the format to show Content, with the Teaser View mode.

Views, using Format Content, with Teaser View Mode

We control what we want to see and how we want to see the content, via the Manage Display tab, of the content type. (As shown earlier).

If you’d like to control that a little more with custom markup, you can use a template. Switching on Twig Debug in your local sites/default/services.yml file is helpful to show the theme template suggestion name.

See “Working with theme templates” for more information and “Template Naming Conventions”.

Twig Debug Output example

Partial code from: node--article–teaser.html.twig where {{ content }} would have gone.

  <div class="custom-fields-wrapper">
    {% if content.field_icon %}
      <div class="my-icon">
        <a href="linkref">{{ content.field_icon }}</a>
      </div>
    {% endif %}

    {% if content.field_image %}
      <div class="my-special-imagefield">
        {{ content.field_image }}
      </div>
    {% endif %}

    {% if not page %}
      <h2 class="view-title">
        <a href="linkref" rel="bookmark">{{ label }}</a>
      </h2>
    {% endif %}

      <p class="teaser-text">{{ content.body }}</p>
      <a href="linkref">Read more</a>

  </div>

Having the article teaser set, means that wherever that teaser is placed (think of it as a component), it will look the same (responsively of course). Whether in a sidebar block, of listing view of teasers. If we change it in one place, it would change all over the site. This makes things more maintainable and consistent across the site, over time.

So, in our examples, the two views basically display the same thing, but with the second option (using View modes and Twig templates in code), users who may want to change the output display of a field, in the content type, by using the “manage display” form can easily do so without having to edit the Views custom field output from the first example. Of course, in this example we’ve also templated the article teaser (in code), seen in View 2, so we’d need to change the template code if the html structure or field ordering needed to change.

You can see all current View Modes here: /admin/structure/display-modes/view and create new ones.

Tags:

Stay in the Loop

We will use the personal data you are sharing with us solely for the purpose of sending you our newsletter. See more here: Data Privacy.

GET IN TOUCH

Let us know how we can help you.

1