| Drupal

How to Use Contextual Filters in Drupal 8

Contextual filters in Drupal allow you to add or remove information (content) to the currently displayed view. The filter acts dynamically based on the URL.

If the provided argument value is in the URL, the view will contain certain results, if the value is not in the URL, the view will be filtered with other results.

This whole concept implies certain complexity, so the best way to clarify it is with an example. 

Keep reading if you want to grasp the idea behind contextual filters in Drupal 8!


Step #1. Create the View

For the purpose of this tutorial, I have created 11 articles with an image and body text.

190930 drupal basic workflow

  191019 contextual filers 001

The goal of this exercise is to create a block with a view displaying articles, related to the currently viewed post. 

  • Click Structure > Views > Add view
  • Set the following options
    • Show Content of type Article
    • Create a Block
    • Display a Grid of fields
    • Choose 12 items per block
  • Click Save and edit

191019 contextual filers 002

 

  • On the FIELDS section click Add
  • Search for the Image field and select it
  • Click Add and configure fields

191019 contextual filers 003

 

  • Link the image to the Content

Notice that I created a squared image style (Configuration > Image styles), to display it in the view. More on Image styles on a future tutorial. 

  • Click Apply

  191019 contextual filers 004 

 

  • In the FIELDS section click the dropdown arrow and select Rearrange

191019 contextual filers 005

 

  • Drag the Image field above the Title
  • Click Apply

191019 contextual filers 006 

 

  • Click Grid Settings in the FORMAT section
  • Change the number of columns to 2
  • Click Apply

191019 contextual filers 006

 

  • Click Save to save the view

 Step #2. - Place the View Block

  • Click Structure > Block layout
  • Scroll down to the Sidebar second region
  • Click Place block

191019 contextual filers 008

 

NOTICE: I have also removed the 2 blocks on the Sidebar first region.

  • Search for the name of your view in the search box
  • Click Place block

191019 contextual filers 009

 

  • Restrict the block only to the Article content type
  • Click Save block

191019 contextual filers 010

 

  • Go to the frontend of your site
  • Open one of your articles.

You will see the block displaying the view the way you have just configured it. However, the currently displayed article will also appear within the view results. That is not user-friendly and looks less professional.

191019 contextual filers 011

 


Step #3. - Views Contextual Filters

  • Hover your mouse over the block  
  • Click the pencil icon and Edit view

  191019 contextual filers 012

 

  • Click ADVANCED to display the right-hand column of Views UI
  • Click Add to ad a Contextual filter

191019 contextual filers 013

 

  • Display only the filters related to Content
  • Select the Entity (Content) ID as a contextual filter
  • Click Add and configure contextual filters

191019 contextual filers 014

 

This view is displayed in a block. Blocks do not have URLs to reference, so you have to add this “connection” manually. 

  • Click When the filter value is NOT available
  • Select Provide default value
  • Choose Content ID from URL
  • Click Apply

191019 contextual filers 015

 

  • Scroll down to the Preview section

This is where you can test how the contextual filter works. The system will take the value of the Article (in this case) ID from the URL and according to that value, it will filter and present the right view. 

One thing to notice is that Drupal is smart enough to internally figure out the node id, even if you have enabled Pathauto, or have changed the URL manually in the node edit form.   

  • Enter the ID of one of your articles
  • Click Update preview

191019 contextual filers 016

 

The view will display just the element related to that particular article. This is not what we want to have. As a matter of fact, it is the exact opposite of what we want to achieve.

  • Click the Content: ID filter
  • Scroll down and click MORE
  • Check Exclude
  • Click Apply

191019 contextual filers 017

 

By clicking exclude, you are basically telling Drupal to display all results of the view, except the one related to the currently displayed article. 

  • Click Save to save the view

If you go to one of your articles, you will see a block displaying all other related publications, but not the one you are reading.

191019 contextual filers 018

 

This tutorial only scratches the surface of what is possible with contextual filters. I hope this has helped you to clarify the concept a little more.

Thanks for reading! 


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.