Learning to Work with Views

Posted: May 15, 2013 under Drupal

In this lesson we're going to talk about what is possibly the most useful Drupal site building module of them all - Views. If you're coming from a WordPress or Joomla background, you won't have experienced anything quite like it. Not only does Views allow you to easily build queries on your site's content, but it gives an amazing degree of control over the display of those query results.

We're going to begin by creating a very basic view just to get acquainted with the interface and some of the settings we'll be using the most often. If you've been following along and are using my free installation profile, then everything you'll need is ready to go. If you're using your own site, make sure you have Views installed along with some content you can work with. If you have a fresh install of Drupal, the Devel module is great for generating dummy content.

Once you're all set, let's get started creating our first view.

Creating a View

To begin, let's head to Structure > Views. You should see something like the screenshot below. At the upper left of the page is a link that says, "Add new view". Go ahead and click it.

Add a new view

You'll next be directed to the screen below. If you wanted to keep things super easy, you could just add a title and then save to have a view of all your site's content presented as teasers. We're going to do something a bit different, however. Take a look at the settings below.

Creating a new view

You'll see that I've named the view "Blog grid" and set it to only show content of the Article type. Often you may want to create an additional display, such as a block, but in this example we're going to just stick with the default Page view.

The ability to create multiple displays is one of the really cool things about Views. We're building one query, but we have the option to display it in multiple ways - a page, a block or even a feed - and then tweak the display of each as needed.

We'll go with what we have here and click "Continue and edit". You'll next see the view edit form as in the screenshot below.

The views edit screen

OK, there's a lot going on with this form, but we're only going to focus on a few of these settings to keep it simple this time around. Let's begin with two that we're not going to edit in this lesson, but that I'd like you to take a moment to check out. These are the Filter Criteria and the Sort Criteriasettings.

You'll see that they determine the type of content we're working with, the publish status and how the results will be sorted (in our case, by date with the newest displayed first). These settings make it very easy to add criteria to further filter our results.

For example, one thing that is often useful to do is only include nodes in your view that have been promoted to the front page. This allows you to do something like publish a post but not include it in the main list of your blog articles. I do this occasionally when I don't want a post distributed to email subscribers, but do want it available through my Categories menu.

Take a look at these options, play around with them bit and see what changes you can come up with. Experimenting is a great way to figure out all the things Views is capable of doing.

Editing a Field Display

In our last tutorial, we talked about content types and the Fields UI. In this lesson we're circling back a bit on that subject by using fields to create our view. That's what a view mostly boils down to - a query where we ask Drupal to return certain fields so we can use them in a display we place on our site. You'll see that in this view all that we currently have being displayed are the titles of our articles. The preview (down at the bottom of the page) also shows us that our titles are being displayed as simple, unformatted links. 

Although it's a good idea to have the title as a link, we should probably change the display style to a heading. To do this, click on Content: Title under Fields. You'll see something like the screenshot below.

Edit the title filed

You'll notice that I've expanded the Style Settings tab and checked "Customize field HTML" and set it to display the title as an H2. I could have done a lot of other customizations, including adding a class, changing the field wrapper and more.

Farther down this screen you'll see the Rewrite Results tab and that is where things get really interesting. You can pretty much go nuts with how you want to customize a field's display. This is super powerful stuff! The only criticism I'll offer is that by default, Views generates markup that is quite bloated - it has a serious case of divitis. Fortunately, we have the Semantic Views module to tidy things up. We won't get into using that module in this lesson, but I recommend you take a look at it on your own.

I'm going apply these settings for all displays, but note that by using the drop down at the top of this screen you could choose to instead apply it to a specific display. This is very useful when you're using the query to create multiple displays (pages, blocks or feeds) and modifying how each one outputs the view.

After applying the changes, you should notice in the preview that the titles have been successfully changed to headings. So far, so good. But let's add another field to our display to make it a bit more useful. You'll see in the screenshot below there is an arrow pointing to the link that adds a new field to our view.

Adding a new field to the view

After clicking that button, you'll see a long list of options pop up. Let's select Content: Body and then continue by clicking the, "Apply (all displays)" button. You'll next see the same screen as when we edited the Title field. One difference this time is that "Create a label" is now checked. In most cases I uncheck that so that my views don't add labels, but you may find situations where it comes in handy.

Another difference this time is that we're going to make a change to the format of the field. We probably aren't going to want the entire Body field to be displayed in our view, so instead we'll set it to only display a summary. You'll see a drop down under Formatter. Go ahead and select, "Summary or trimmed". In this case the default settings are fine, but I encourage you to play around with some of these a bit and see what you come up with. Now we'll click, "Apply (all displays)" to continue.

After saving that, take a look at the preview - looking pretty good, huh? We've come far enough that we should see what this Page view we've created actually looks like on our site. First, however, make sure you save your view! That's an important thing to remember - none of your changes are applied until you save the view, so if you ever get off track, just click cancel and start over.

After saving, look for a small link at the upper right of the view edit screen that says, "view Page". Let's click that and take a look at the view we've created as it will appear on our site.

Our completed view

That was pretty easy, right? I'll bet that you can think of a lot applications just using what we learned today, but in future lessons we'll be coming back to the Views module and adding to our bag of tricks. In fact, our next lesson will cover some advanced features of views (contextual links and relationships) and in a few weeks we'll use Views and the Flex Slider module to add an image slider to our front page.

Until then, you can keep up with this series by subscribing to blog updates (at the top of the sidebar).

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.