Customizing view templates and variables
Video: Customizing view templates and variablesOne 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.
Viewers: in countries Watching now:
Drupal 7: Creating and Editing Custom Themes shows the tools and techniques needed to build custom web sites with Drupal. Author Chaz Chumley introduces Drupal theme administration and takes a look at basic theming concepts, such as templates, regions, and variables. The course explores how Drupal default themes are configured and structured and how to install and edit a theme. The course also explores the tools a designer needs to create a Drupal 7 theme, using HTML, CSS, PHP, and Drupal templates, or migrate an existing Drupal 6 theme to Drupal 7. Exercise files are included with this course.
- Installing Drupal 7 on Mac or Windows
- Using the Devel and Theme Developer modules
- Understanding templates and variables
- Choosing global and theme specific settings
- Creating a theme roadmap
- Creating the theme folder, structure, and .info file
- Customizing HTML templates and variables
- Creating template regions and rendering page variables
- Understanding performance considerations such as caching
- Migrating themes from Drupal 6 to Drupal 7
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.
Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .
Here are the FAQs that matched your search "" :
- Q: The Acquia Dev Desktop Control Panel won't open after I restart my system. Is this a bug? What can I do to fix it?
- A: Some Mac users are having semi-serious difficulties with the Acquia Dev Desktop Control Panel repeatedly failing to open after routine system restart. See here and here for details.Fortunately, a reasonable work-around for an otherwise crippling issue is running this shell command in Terminal:Panel.app/Contents/MacOS/AcquiaDevDesktopControlPanelAcquia Dev Desktop Control Panel is not the only solution available. As an alternative, Mac users can switch to MAMP and Windows users can switch to WAMP, until this issue is resolved permanently.
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.