Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing view templates and variables

From: Drupal 7: Creating and Editing Custom Themes

Video: Customizing view templates and variables

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.

Customizing view templates and variables

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.

Show transcript

This video is part of

Image for Drupal 7: Creating and Editing Custom Themes
Drupal 7: Creating and Editing Custom Themes

42 video lessons · 11681 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 5m 58s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 4s
    3. Viewing the finished project
      2m 51s
  2. 23m 21s
    1. Installing Drupal 7 (Mac or Windows)
      7m 23s
    2. Using a development environment
      3m 36s
    3. Installing contributed modules
      3m 43s
    4. Using the Administration Menu module
      3m 55s
    5. Using the Backup and Migrate module
      4m 44s
  3. 15m 35s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 55s
    3. Using the Block Class module
      3m 17s
  4. 9m 42s
    1. Exploring the Appearance interface
      3m 20s
    2. Choosing global and theme-specific settings
      2m 55s
    3. Installing prebuilt themes
      3m 27s
  5. 10m 40s
    1. Anatomy of a theme
      2m 57s
    2. Structure of a theme
      1m 52s
    3. Understanding templates and variables
      4m 11s
    4. Exploring the theme registry
      1m 40s
  6. 27m 23s
    1. Exploring the Bartik themes folder, file structure, and .info file
      5m 45s
    2. Exploring how CSS references work in Drupal
      10m 49s
    3. Exploring how script references work in Drupal
      5m 7s
    4. Exploring regions and how they are referenced in a theme
      5m 42s
  7. 11m 5s
    1. Using the Backup Migrate module to create content for a web site
      2m 33s
    2. Creating a theming roadmap
      3m 10s
    3. Creating a theme folder, theme structure, and a .info file and enabling a theme
      5m 22s
  8. 54m 5s
    1. Customizing HTML templates and variables
      5m 29s
    2. Customizing page templates and variables
      13m 43s
    3. Creating regions and rendering page variables
      11m 36s
    4. Customizing region templates and variables
      53s
    5. Customizing node templates and variables
      4m 49s
    6. Customizing block templates and variables
      12m 14s
    7. Customizing view templates and variables
      5m 21s
  9. 13m 36s
    1. Removing unnecessary modules
      2m 46s
    2. Optimizing the CSS and JavaScript
      2m 45s
    3. Enabling caching
      4m 43s
    4. Exploring the performance settings
      3m 22s
  10. 44m 19s
    1. Recreating HanselAndPetal content, files, and the .info file
      14m 0s
    2. Adding an HTML template and modifying page templates
      11m 25s
    3. Converting node templates and page variables
      10m 30s
    4. Converting block templates and page variables
      3m 41s
    5. Converting miscellaneous templates and cleaning up CSS
      4m 43s
  11. 1m 11s
    1. Goodbye
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.