Skip to main content

Working with Views Templates in Drupal

Working with Views can be a little confusing for anyone new to Drupal. Don't get me wrong, Views is an absolutely brilliant piece of programming (thanks merlinofchaos!), but there are so many options that finding the correct toggle can be daunting. And no matter how brilliant, eventually you'll discover you've outgrown all available options in rewriting and variable usage and you need to figure out how to modify values via php. The answer? Views templates. And Views helps you out there too!

And How

For this example we are going to focus on one specific problem: creating a list of image thumbnails.

In our hypothetical we have extended a node type via cck to include an image upload called [field_image_value] that we display when viewing the full node.  When each node is created a thumbnail is auto-created via the IMCE Plugin on upload. We've given them a suffix of _thumbnail such that our-image-filename.jpg becomes thumbnail our-image-filename_thumbnail.jpg.

For our block output we want something like this for each node retrieved:

Image thumbnail

Node Title


Node Teaser, limited to two hundred characters...

Sounds easy right? Actually, yes it is, as long as you know the correct steps.

Step 1: Construct View

Construct your view so that you have [field_image_value], [title] and [teaser] as fields.  For [field_image_value] and [title] check the last option, Link this field to its node.

Open [field_image_value], which contains the path to the large image and check Rewrite the output of this field and type the following:

Image thumbnail

Add an argument to limit your view results to just the node type you have created with an image cck field. Add a block display and save your view.

Now if you add your block to a page you should see we everything you want except all the images are fullsize. Time for view templates.

Step 2: Determine view name

Return to your view and under Basic Settings, click Theme: Information

Below, you'll see all the possible template file names you could use to theme your view. In this example, we are interested in theming a specific field when it appears inside of a specific view (not every instance) so we'll want to look under our [field_image_value] for the correct template which should follow this format: views-view-field--[Our_View_Name]--[field_image_value].tpl.php

So, for Our_View_Name the correct filename would be:

views-view-field--Our-View-Name--field-image-value.tpl.php

Step 3: Make your template

So we're not starting from scratch copy /modules/views/theme/views-view-field.tpl.php to /themes/yourtheme/views-view-field--Our-View-Name--field-image-value.tpl.php

Now, if you revisit your view, open Basic Settings > Theme: Information, and click the button at the bottom, Rescan Template Files you'll see that your new template file appears in bold.

Opening this template you'll see it's pretty basic. Out of the box, we're just passing a variable along, but Merlin has provided some documentation to assist with more complicated theming:

<?php
// $Id: views-view-field.tpl.php,v 1.1 2008/05/16 22:22:32 merlinofchaos Exp $
 /**
  * This template is used to print a single field in a view. It is not
  * actually used in default Views, as this is registered as a theme
  * function which has better performance. For single overrides, the
  * template is perfectly okay.
  *
  * Variables available:
  * - $view: The view object
  * - $field: The field handler object that can process the input
  * - $row: The raw SQL result that can be used
  * - $output: The processed output that will normally be used.
  *
  * When fetching output from the $row, this construct should be used:
  * $data = $row->{$field->field_alias}
  *
  * The above will guarantee that you'll always get the correct data,
  * regardless of any changes in the aliasing that might happen if
  * the view is modified.
  */
?>
<?php print $output; ?>

Our situation is pretty straight-forward, we'll just add a tiny bit of php to replace ".jpg" with "_thumb.jpg" for our [field_image_value].

<?php print str_replace(".jpg", "_thumbnail.jpg", $output);?>

Save your template, and flush the Theme Registry cache. You're done!

If you revisit the page displaying your block, you'll see the thumbnails are now displayed.

But what if I don't?

Here are a few gotchas and possible solutions:

  • If the image displays as an error then there is likely a typo in your template
  • If the original image displays and not the thumbnail make sure you have rescanned your templates and try flushing all your caches. Also, check that your browser isn't caching, if using in most browsers you can use CTRL-R to do a complete refresh
  • If your administration theme is different than your production theme, then your templates will not reflect the changes inside of the views previews
Labels:

Comments

Post a Comment

Popular posts from this blog

Auto Format (and Color) Outlook Appointments

A few years ago I got turned on to the idea of indexing your life by color. In a quick glance your mind can comprehend really complex patterns. By coloring entries in my calendar I am able to tell immediately if I am available or if a future appointment conflicts with a work meeting. There are a number of ways to set this up. Outlook allows you to add a label to every appointment. However this is an Outlook specific feature and I sync my calendar across Outlook, Yahoo! and iCalendar. The later two don't even have labels. Besides, calendars should be simple. Complexity only hinders usability, so I prefer an automated solution. How to color appointments in Outlook automatically: In Calendar, right-click the calendar grid, and then click Automatic Formatting on the shortcut menu. Click Add, and then type a name for the rule. In the Label list, click a color. Click Condition to specify the conditions under which the color will be applied. Note: If you manually assign a color to a
1 comment
Read more

Attachment Reminder - and more for MS Outlook

I just did it again. We don't like to admit it, but we all have. You write a long letter describing the attachment, press send and then 10 seconds later remember you didn't actually attach the message. I finally decided to do something about it. Turns out it isn't too hard. Chiefly because Jimmy Peña at Code for Excel and Outlook already did all the hard work of writing up an excellent MS Outlook Etiquette Check Macro that does all the dirty work for you. What's left for you to do? In MS Outlook go to Tools > Macros > Visual Basic Editor Under the Project Panel (far left) Browse to Project1 > Microsoft Office Outlook Objects > ThisOutlookSession Double-click ThisOutlookSesson to Open (if you haven't been here before this will be a big blank canvas) Visit Code for Excel and Outlook Etiquette Check Code and select "Copy to Clipboard" at the top of the code. Or you can also copy from the code I've modified below if you prefer.
5 comments
Read more

Simple HTTP Redirect with Querystring in IIS7

HTTP Redirect seems simple enough. Always was in IIS6 and in IIS7 there's even a button labeled HTTP Redirect that promises relative redirects.  It looks like it'll be as easy Apache finally.  That is until you try to redirect a querystring.  Then everything bombs. Turns out it still is relatively easy, except you have to know that Microsoft changed $S$Q to $V$Q. Why? $Ss and $Gs I suspect. And How. In our example we'll redirect all pages under http://olddomain.com/content to http://mydomain.com/content. Pick the virtual directory you want to redirect. e.g. http://olddomain.com/content Click HTTP Redirect under IIS in the IIS management console. In the HTTP Redirect Dialog: Check Redirect requests to this destination Enter your new path ending with $V$Q.  e.g. http://mydomain.com$V$Q Counter-intuitively check Redirect all request to exact destination (instead of relative destination) Choose the appropriate Status Code (Permanent or Temporary)
5 comments
Read more