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

Comments

Popular posts from this blog

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 destinationEnter your new path ending with $V$Q.  e.g. http://mydomain.com$V$QCounter-intuitively check Redirect all request to exact destination (instead of relative destination)Choose the appropriate Status Code (Permanent or Temporary)Apply Changes and Test

Maintaining Cross-Database Referential Integrity

It is often convenient to house your master tables in a separate database from application specific databases so that primary keys are copasetic and multiple databases have access to the same lookups.

Common examples would include employees, counties, regions and other lookup tables.

Once these tables are in a separate database however it is no longer possible to simply drag-and-drop a relationship between them to maintain referential integrity.

Here's a Solution
For this example we'll use an Observation table, tied to a master list of Sex, that's right, Sex (we could call it Gender to be all PC, but these are animals, not Pat in the Personnel Department.)

Step 1:
We create a new view called PIC_Sex in our Application Database by querying the table PIC_Sex in our Master Database:

CREATE VIEW dbo.PIC_Sex AS
SELECT SexID, Sex, Rank
FROM Master.dbo.PIC_Sex
ORDER BY Rank
Yes, that's right, Male and Female! You don't even want to go down that road.

Step 2:
We create a new user-defi…

Serving up KML in IIS 6

To serve up KML in IIS 6, you have to add a few MIME Types. The easiest way to do this is to apply new MIME Type settings globally by changing the properties on your server's "Web Sites" folder in IIS.


Google Earth reads KML and KMZ files. The MIME type for KML files is

* application/vnd.google-earth.kml+xml

The MIME type for KMZ files is

* application/vnd.google-earth.kmz

Source: Google KML Tutorial


To add a MIME type to a Web site or directory

1. In IIS Manager, right-click the Web site or Web site directory for which you want to add a MIME type, and click Properties.

2. Click the HTTP Headers tab.

3. Click MIME Types.

4. Click New.

5. In the Extension box, type the file name extension.

6. In the MIME type box, type a valid MIME type. If you define a MIME type that has already been defined at a higher level, you are prompted to select the level where the MIME type should reside.

To create a MIME type for an undefined MIME type, type an asterisk (*) in the Extension box, an…