Front-end engineer with a passion for learning something new every day

Using Views Contextual Filters to Create a Related Content Block With Drupal 7

I recently built my new photo portfolio site High Rock Photo and on single image gallery pages (a Content Type I created), I wanted to show "related" images that were in the same category. That is to say images that were tagged with the same taxonomy term. In my case, I have categories assigned to images such as "Architecture", "Maritime", "Nature", etc... Each image is only assigned to one category. On each image page, I wanted to automatically show a "related" content block of similar images. I knew the ideal way to do this would be with Views but it ended up being a little tricky. In the end, Views Contextual Filters was the solution. 

Related Images block using Views Contextual Filters

Related Images block using Views Contextual Filters

If you are not familiar with Views Contextual Filters for Drupal 7, it was known as Views Arguments in Drupal 6 and then got renamed for Drupal 7. Essentially, Contextual Filters intelligently filters content to reduce the result set in various ways and is pretty powerful. You can also have more than one filter set on a View. By using this method, it makes your View scalable and one View can be used on many pages on your site rather than having to create many views, one for each page / block. 

To begin, set up a basic View with a Block that shows the Node Title which is usually added by default in Views 3 for Drupal 7. I also added an Image from the content type I am using for this View. In my case the content type is called "Image Page" and I am using the Node Title and an Image in my View. You can configure the display any way that suits your view. In the end, I just wanted the images to show so I removed the Node Title from the View but I always like to create a View using the Node Title to begin with just to make sure you are getting the right data. I also made the image clickable to it's content page by setting "Link image" to "Content". 

Next, under the "Advanced" area of the Views UI admin, expand that and you will see "Contextual Filters". We are going to add two here, the first one will be "Content: Nid". Under "When the filter value is NOT available", select Provide default value and choose in the select list, Content ID from URL. What this does is make it so your actual node that you are currently in does not show up in the related content block. One more setting not shown in the screen capture would be to set "exclude" in the more section at the bottom. 

Contextual Filter - 'Content: Nid'

Now add a new filter and this time use: Content: Has taxonomy term ID". Under "When the filter value is NOT available", choose "Provide default value" and choose type of "Taxonomy term ID from URL". Next choose "Load default filter from node page, that's good for related taxonomy blocks" and that will then toggle to make visible any Taxonomy Vocabulary that could be relevant, in my case it's "Image Category". Note, that within the Views UI, auto preview will not work once you have assigned Contextual Filters unless you enter in the arguments. 

Contextual Filter - 'Content: Has taxonomy term ID'

Your View should be complete now, save it an assign it to the relevant content pages.  In my case, I assigned the View Block I created to my "Image Page" Content Type pages. You can do this either using the Context Module or using the traditional method of the blocks admin page. You can see a working version of the view here.

Tags

Read other blog posts