My Drupal Blog

UPDATE

It appears that I missed the very obvious solution to this problem (!) which, as pointed out by a couple of commenters, is to use the ‘Trim this field to a maximum length’ option within the settings for the node title field.

I’ll leave this post in place as I think it still serves as a useful guide on how to create template override files for views, but please be advised that for implementing truncation of a views node title it is easier to:

• navigate to the view's 'Edit view viewname' page (/admin/build/views/edit/viewname) and click the ‘Node: Title' link
  
• check the ‘Trim this field to a maximum length’ checkbox, and adjust the settings as required
  

----

Problem:

You've set up a view (using Drupal's views module) which outputs a list of your site's node titles, with each node title linking to its node. However, one (or more) of your node titles is really long and you want to truncate it.

Solution:

In this example I'll be using:

• Drupal 6
• Views 6.x-2.6
• A view called 'test'

The views module makes it super easy for us to override views fields and manipulate their output. In order to truncate our node title we're going to:

• 1. create a template file which overrides the view's node title field
• 2. alter the contents of the new template file and implement the truncation

Step 1 - Create our new template file:

Navigate to the 'Edit view test' page (/admin/build/views/edit/test) and click the 'Theme: Information' link.

Views provides us with a list of possible templates we can use to override the view. We specifically want to override the node title field, so we're going to choose one of the template file names next to 'Field Node: Title (ID: title)' - 'views-view-field--test--title.tpl.php' will be the best option as it will override any title field within the test view.
Now click on 'Field Node: Title (ID: title)':

and we see that views also provides us with the code for our new template file:

Copy this code and paste it into a new PHP file. Now save the PHP file as 'views-view-field--test--title.tpl.php' in the root of your Drupal site's theme folder
(e.g. /sites/all/themes/mythemename/views-view-field--test--title.tpl.php)

Return to the theming information (by clicking the 'Back to theming information' link) and click the 'Rescan template files' button. Views should find and highlight (as it is now the most specific) our new views-view-field--test--title.tpl.php file.

Now we're ready to override the output.

Step 2 - Alter the contents of our new template file and implement the truncation:

The majority of the lines of code within the new template file are comments. The part we are really interested in is the code which outputs the view node title field:

A basic truncation of our node title can be implemented using Drupal's truncate_utf8 function, by changing the code in the new file to:

However, whilst this will work fine if our node titles are just plain (no-link) text:

trying this on node titles which are also links to their nodes will cause the links to apparently disappear:

This is because the truncate_utf8 function counts the length of the entire string used to output the field (which includes the html), and not just the length of the output which we see on the screen. For example, the '...really really long title' node title's html is actually:

which means that using the above truncation code results in the only output being some broken html, along the lines of:

So, in order to successfully truncate our node title links we need to truncate just the title which we will see on the screen and leave the surrounding html <a></a> tags alone. We can do so using the following code in our new template file:

giving the desired result: