Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most dynamic capabilities of Drupal is when it comes to Views. Views give the theme or the ability to output list of nodes or content in varying manner. With the Views UIs you can override the output without even touching a template. But for cleaner HTML we can also modify the templates for views and the page variables it outputs. Even though our theme is complete I want to discuss views and views template in general. Most Drupal sites use Views to display data in the form of lists of nodes with various filters and fields being displayed.
And if you're not familiar with Views, then I would ask you to take a look at the series just released by Tom Geller called Drupal 7 Reporting and Visualizing Data. As we take a look at the same and compare it to our static HTML we can see that the homepage, even though a static version of it, is a now completely being displayed and all the dynamic glory that's called Drupal. And as we had walk through all of this it really wasn't that difficult.
But I want to do one more thing. The purist in me can't handle the HTML output that Views are wrapping around some of the content. And if I inspect the elements such as upcoming events I can see a wrapping div for the view, one for the constant, and one for the Views fields. I want to remove that just kind of strip it down a little bit more. So let's take a look at how we do that. Browse over to our editor and let's actually explore where View templates live.
They actually reside inside of the sites> all>modules folder, and this is because views are a contribute module. And if I scroll down to views and expand the folder and then look inside of the theme folder, I can see that there are quite a few different templates available to me. The one that I want to take a look at first his views-view. I want to copy this and paste it into my sites>all>themes>samoca>templates folder.
Once I have them in place I can double-click on it and take a look at exactly what it does. There is not a lot of information here other than wrapping developments and some of the different variables that make up the Views interface. Items such as a title prefix and title suffix used by contributed modules, the ability to expose filters attachments, and display rows of content based off of the Views query. In our case what I want to do is actually remove the wrapping div.
So I am going to highlight that div and delete it and find its closing div at the bottom and then I also want to remove the div that is wrapped around the rows statement. If I highlight the div with the class of view content and delete it and then delete the closing div and then save this template, I am going to browse back over to Drupal and I am going to Flush the page cache. Now if I inspect this element, I can see that the only thing left really wrapping around this particular view is the wrapper for the views row and the wrapper for the views field.
Let's now take a look at removing the wrapper for the views field. Browse back to our Editor, scroll up to the views folder and the particular view templates that we are looking for is called views-view fields, copy this, and paste it into your sites all> themes>samoca>templates folder. Once it's in there, go ahead and double-click to open and actually what I want to do here is remove every thing that's in here except for where it's printing the field content.
So I should be left with a foreach statement followed by the actual printing of the field content. If I save this template, browse back to Drupal, and Flush the page cache, then inspect this element, I can see that all I'm left with now is a wrapping div for the views row. Hopefully, you are seeing a pattern here and we could take this step by step and eventually clean up the HTML to where only thing left is the content that's being output.
We have taken a look what a view template is, the complexity of view templating, and where to locate views templates. We've also followed best practices for modifying the HTML output. While you can get even more events with view streaming it's best to use a fine balance between template modifications and overriding Drupal CSS. Hopefully, you have a better understanding of what is involved in taking the templates in a step by step manner and modifying them to have your static HTML look like a dynamic HTML.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103152 Viewers
58 Video lessons · 55673 Viewers
61 Video lessons · 89829 Viewers
56 Video lessons · 104993 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.