Learn how to create a block using the Views module.
We’ll cover the following:
- Introduced to the Views module
- Create a block which displays article titles in the sidebar
Transcript
Trainer (00:00):
In the previous video, you learned how to create a block using views, which displays the latest content. And here you can see the block on the left hand side. Now I want to show you how to create a block with views again, but this time we will add a contextual filter on the view, which will load the current article that you are on. And it’ll display the field of values of that article in the sidebar on the right. This block will display the image, the updated date, when the article was last updated and also the tags. And it’ll only be visible on article content types. So before we can create this view, let’s go ahead and update this article and we’ll add in an image and also a few tags. So click on edit and let me upload my test image and I’ll add feature image into the alternative text.
Trainer (01:04):
And then in tags, I’ll enter in Drupal and also WordPress. And then I’ll click on save. Now let’s create the view. So go to structure, views, and then click on add view. Then in the view name, enter in “content block” and then from view set settings, make sure content is selected from the show dropdown. From type of select, article because remember we only want to display article content types and then from the sorted by dropdown, select unsorted. Then from block settings, check, create a block and we’ll check change the items per block to one, and we’ll leave everything else and click on save and edit. Now, the first thing we need to do is add in a contextual filter. To do that, click on advanced and then click on add next to contextual filters. A contextual filter allows you to pass argument into the view.
Trainer (02:06):
So we’ll set it up to automatically get the ID of the article, which is the node ID from the URL. Let’s search for ID and make sure you check ID from the content category and then click on add and configure contextual filters. And then from this group of radio button check, provider default value and from the dropdown select, content ID from the URL. So the view will get the ID from node slash and then the ID in the URL. So select that, then click on apply. And if we scroll down to the preview, we can’t see an actual preview. And the reason for that is because we need to pass an actual ID through here. So I do know that the article node ID is one, but if we go to content and I’ll open that up in a new tab and we click on latest article, you can see up the top here in the URL, it is node/1.
Trainer (03:07):
So if we come back here and add in one and click on update preview, we can see our latest article. If we add in two, which is the basic page, nothing will return because we have a filter which will only show us articles. But if we change this back to one, we can see our article. Okay, so now that we’ve configured the contextual filter, let’s add in the fields. So scroll up and then click on, add next to fields and search for image. Then click on, add and configure fields. From the image style dropdown select large 480 by 480. This means that Drupal will resize the uploaded image so that it is not larger than 480 by 480. Then click on, apply and click on title and then remove it because we don’t need it. Click on, add again. Search for changed.
Trainer (04:08):
Then check changed from the content category and click on, create a label and we’ll enter in the label of updated. Then we’ll click on, apply and click on add one last time and search for tags. And let’s add this field and leave everything as it is, then click on apply. Then if we scroll down, we can see our featured image, our updated date, and also our tags. Let’s save the view. And now let’s add this block into a region. So to do that, go to structure, block layout, and scroll all the way down till you see sidebar second, not sidebar first. This is sidebar second. Click on place, block search for content block and uncheck display title, because we don’t want the block title to be visible.
Trainer (05:07):
And from the visibility settings, make sure you check article under content types so that this block is only shown on articles. Then click on save block and scroll down and click on save blocks. Now, if we go back to the front and we are already on an article, we can see the block in the right with the image and also the last time it was updated, as well as the tags. As you can see, views is a pretty versatile module. Yes, it can take a while to learn, but once you understand how to use it, it’ll become a very powerful site building tool.