Introduction
Views is one of the most popular Drupal modules with over 5 million downloads and over 700 thousand sites that report using it. It is so popular that Drupal 8 will ship with Views in core as part of an exciting and welcomed initiative of the Drupal 8 release process.
This is an introductory tutorial to the world of Views and how you can use this great module to create listings of content. There are a few smaller topics that I will cover as part of this tutorial. First, we’ll see how to get started and create a View. Then we will see what kind of listings and content formats are available for us out of the box.
Once we choose how the View will look like, we will cover a bit of filtering and sorting. These options are used to make sure we display only the right content and in the order we want it to appear. Sounds exciting?
Let’s dive right in.
Getting started
Installing Views is like installing any other module. I’m not going to cover the process of installing Drupal modules but rather point you to the definitive guide on Drupal.org.
If you know how to use Drush (which I recommend wholeheartedly to learn), you can run two simple commands and you’re good to go:
drush dl views
drush en views views_ui -y
This will download and enable all the necessary modules (including CTools which is a dependency).
Now that we have Views installed, we can navigate to admin/structure/views to get an overview of all the existing Views on the site. You’ll notice a few disabled ones that come out of the box. We won’t go into those but it’s good to know they are there. Front page and Taxonomy Term are particularly interesting as they emulate and replace default Drupal behaviors.
What I want to do going forward is to create a View and play around to illustrate how you can start using it. So go ahead and click the Add new view link at the top to get to the View creation form.
Here we’ll set a View name and inside the first fieldset we can already filter on what kind of information the View will show.
We will select to show Content (nodes) but you’ll notice also other entities (terms, users etc). Please note that the choice you make in this select box cannot be changed later. Since we chose Content, we get also the option of choosing which content type. For now let’s go with Article but know that you can change this later on when editing the View.
Additionally, since we chose the Article content type which has a Tags field that references taxonomy terms in the vocabulary with the same name, we can also do an immediate filtering based on this. We won’t, however know that it is possible (both now and later when editing the View). And lastly, we can sort the listing by a few of the already available criteria, but we won’t do that either yet.
Page Display
Below the fieldset we just edited, we see 2 more fieldsets that give us the possibility to create a page and a block. They are shortcuts to creating displays for our View.
Any View can contain multiple displays of different types (page, block, feed etc). Some are available out of the box and some are provided by other contributed modules. Therefore you can create a single View that displays the same content in multiple ways, using different formats, filters etc.
For this article, we will stick to the Page display and we will create it at the next step (just so you see the whole process). So leave those 2 checkboxes unchecked, and click Continue and edit.
You will be taken to the main View edit page where I recommend clicking the Save button as the View is not yet saved before you do this.
On this page you’ll notice at the top a Displays bar which contains one called Master. We want to create a page with a path where we can see our listing. So click Add, select Page and specify a new display name. Next you can also choose a page title by clicking on None under the Title fieldset.
There is one important thing to note here that will serve you well in the future. When you make changes like the one you just made, you’ll get the choice of having it applied to only this display or all the others (see the image below). You have to be careful because the default selection is All displays. It’s easy to forget and that can cause problems if you have multiple displays. so keep this in mind and make sure you make changes to the displays you want to make changes to.
Before going through the rest of the settings, you’ll have to specify a path for the View page. Views will need to register it with Drupal and won’t let you save the View without one. So under Page settings click on the No path is set to specify one. You can then also place it in a menu and specify an access rule for the page.
Format
Under the Format fieldset we have some important options that deal with how the View is displayed and what particularly from the content is displayed. Out of the box you have a few formats you can choose from (and some settings for each) but we will go with the default one for now: unformatted list. This is the simplest one but I do encourage you to play around and experiment with the others.
But now that we selected the format, let’s see what will actually be formatted. By default, it is fields. This means that you choose a number of Drupal fields (either entity properties or fields declared through the Field UI) and they get displayed for every article. This is what we will choose going forward but I want to tell you also about the other option that comes with Views: content.
Each content type in Drupal 7 comes with a few view modes (full, teaser, RSS, etc). Using the Display Suite module you can define even more. And for each view mode you can specify a different way the fields get displayed. For example you will have a different image style for the image in the teaser than in the full view mode.
This is what the content alternative to fields refers to in Views. You can choose the node to be displayed using a particular view mode. And that can be powerful. But let’s move forward with using fields because this keeps us in the realm of Views when it comes to preparing the output of each individual View row.
Fields
Now that we decided to go with the fields option, you’ll notice already in the preview area at the bottom of the page a list of article titles. That’s because by default, Views will include the title field since at least one is required. To add others, click on the Add button under Fields. You’ll be prompted with an overlay where you can search and select fields to add.
Different field types have different options available and unfortunately we cannot go over all of them here. But let’s set out a small goal and try to accomplish it: article node teasers that show the title, Body summary and image.
So look let’s look for the default Body and image fields that come with the Article content type. These appear as Content: Body and Content: Image so check the box next to them and apply.
You’ll have to configure both of these fields one at a time. For the Body we can uncheck the box next to Create a label and under Formatter select the Summary or trimmed together with a custom trim length if you want.
The next 3 collapsed fieldsets are quite advanced and available for most other field types as well. We cannot cover them in this tutorial but here is a quick summary. Under Style settings you can manipulate the HTML that gets rendered for this individual field on every row. Under No results behavior you can specify a value to display in case there is no value inside the field itself. And under Rewrite results you have a lot of options that relate to altering the content of the field being displayed. Here you can merge fields together, create links, strip tags and other powerful actions.
After finishing the Body, you’ll have to repeat the process for the image field. I suggest again removing the label and since we want the image to be for a teaser, let’s select the thumbnail image style. We can also link the image to the content. After saving these settings as well, check the preview below. You should see the title, Body and image for each Article node. If you want to change the order of the fields, click the little arrow next to the Add button you just clicked and choose Rearrange. Then you can drag’n’drop them into position.
Although this is far from over and there’s plenty of editing and styling to be done for any real website, let’s say we are happy with the output and we can move on.
Filters
Below the Fields, you can see the Filter criteria section which already contains two filters (you can click on them and see their options). The first one is a filter on the node status property and shows only content that is published. The second one filters on the type property and shows only the nodes of the type article. Here we can make changes if we want to change or include other content types.
Filters can also be exposed to end users by checking the box Expose this filter to visitors, to allow them to change it. So for instance if we wanted end users to choose which content types should be included, we could edit the filter and enable this functionality.
Under the Advanced fieldset at the right of the page you can also add contextual filters. These are very powerful when you need filters to be passed dynamically from the global scope, URL or other contexts. It’s an advanced feature that we cannot cover here, but keep in mind that it’s there.
Sorting
In the Sort criteria section you can add fields to be used for sorting the View. Let’s look for the node authoring date (Content: Post date) and add it to the View to sort the listing in a Descending order.
Note that you can also expose these fields to the end user and let them perform their own sorting.
Conclusion
So here we are. We put together a simple View that displays some basic information about all the articles on the site. In doing so, we’ve seen how to create a View and what are some of the possibilities regarding its format. We discussed displays and we created our very own page that renders the View. We also saw how we can add fields and what’s the difference between fields and content when it comes to Views. And finally, we looked at which basic filter and sorting criteria exist and how they work.
Unfortunately, we also only just scratched the surface of Views. As an experienced user of Views I feel like I covered nothing of its power. This is because it is so complex that the steps we took pale in comparison. But you have to start with the basics and understand the fundamental concepts before you move on to more exciting functionality.
There are many other features and options in Views that really make it indispensable for almost any Drupal site. I therefore recommend you spend some good time on learning it if you want to work with Drupal in an efficient way.
Daniel SiposDaniel Sipos is a Drupal developer who lives in Brussels, Belgium. He works professionally with Drupal but likes to use other PHP frameworks and technologies as well. He runs webomelette.com, a Drupal blog where he writes articles and tutorials about Drupal development, theming and site building.
