Truncate A Drupal View Node Title

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
    Truncate Drupal view node title
  • check the ‘Trim this field to a maximum length’ checkbox, and adjust the settings as required
    Truncate Drupal view node title

----

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.

Truncate Drupal view node title

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.

Truncate Drupal view node title

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)':

Truncate Drupal view node title

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

<?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; ?>

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.

Truncate Drupal view node title

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:

<?php print $output; ?>

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:

<?php
$output
= truncate_utf8($output,25,FALSE,TRUE);
print
$output;
?>

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

Truncate Drupal view node title

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

Truncate Drupal view node title

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:

<a href="/node/1" title="My Test Page With A Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Title" alt="My Test Page With A Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Title">My Test Page With A Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long Title</a>

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

<a href="/node/1" tit ...

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:

<?php
$title
= strip_tags($output); //title (no tags)
$title_trunc = truncate_utf8($title,25,FALSE,TRUE); //title (no tags) truncated
$output = str_replace($title,$title_trunc,$output); //new link
print $output;
?>

giving the desired result:

Truncate Drupal view node title

20 comments

Lennart Kiil June 14th, 2009 @ 5:51pm

It's easier to just use:

Trim this field to a maximum length

plord June 14th, 2009 @ 6:08pm

I'll second that. You can just trim the field. Am I missing something

merlinofchaos June 14th, 2009 @ 6:35pm

Indeed, as of Views 2.3 the 'rewrite the output of this field' checkbox opens up several really useful options, including an automatic trim that does not require resorting to theming to do this. It also has some nice code to make sure HTML doesn't get fragmented, which makes it generally better than doing it in theme. In titles this isn't usually a problem, since they can't contain HTML, but it's really quite handy for body fields when you want to do custom teasers.

Laurence June 14th, 2009 @ 6:58pm

Hi all, thanks for the comments. I'm not quite sure how I missed that ?! Anyway, I have now updated the post to reflect the easier 'Trim this field to a maximum length' solution.

drupal video tu... July 10th, 2009 @ 2:22pm

trimming would be nice when inserting the codes would be that easy

PaulB July 25th, 2009 @ 3:40pm

Is there a way to truncate the front of a title in the TRIM THIS FIELD TO A MAX LENGTH?

I have a group of titles like this:

The Old Farmer's Almanac Radio Report for July 31, 2009
The Old Farmer's Almanac Radio Report for July 30, 2009
The Old Farmer's Almanac Radio Report for July 29, 2009
The Old Farmer's Almanac Radio Report for July 28, 2009

And I want the view to look like this:

Radio Report for July 31, 2009
Radio Report for July 30, 2009
Radio Report for July 29, 2009
Radio Report for July 28, 2009

When I put a negative number in the field it trims from the right side

ie: -5 trims them like this

The Old Farmer's Almanac Radio Report for July 31
The Old Farmer's Almanac Radio Report for July 30
The Old Farmer's Almanac Radio Report for July 29
The Old Farmer's Almanac Radio Report for July 28

So I need to do the reverse of the negative number.

Thanks!

Logiciel August 8th, 2009 @ 3:30pm

Paul I dont know if there is a easier way, but you could use the original solution of this post and instead of using truncate_utf8 use substr

Aid August 14th, 2009 @ 3:45pm

Is it possible to use Node: Menu Title as a field in Views 2? This is generally a shorter title and better suited to the list I'm trying to create, but I don't see the field to pick on the list... Thanks!

Holland August 24th, 2009 @ 9:49am

I've used the truncate_utf8 method to trim a body field, and it is working, but the length is no longer affected when I use a value greater than '50'. Am I doing something wrong or is there a limit to the truncate length?

Jan Christensen October 4th, 2009 @ 11:07pm

Is there a way to use regexp to rewrite the out put of a field?

Nounou January 17th, 2010 @ 8:50am

Thanks for sharing this tip.

Guest February 21st, 2010 @ 5:31pm

I am looking to use different page.tpl fpr different pages. Can anybody suggest how to use different tpl files and call them?

Steven Dobbelaere March 3rd, 2010 @ 10:18pm

nice. Was a big help for me.

pipicom March 4th, 2010 @ 2:07pm

Thanks man! The 'Trim this field to a maximum length' wouldn't work for me but your article solved my problem.. Thnx again

james March 10th, 2010 @ 1:49pm

Thanks for the in-depth tutorial on this complicated Drupal subject. I plan to switch one of my site into drupal, but it seems quite difficult for me to make it true, since I'm not so familiar yet with it. Need more time to learn. Thanks.

alix March 26th, 2010 @ 9:44am

I have a similar problem. I need to append a query string to the link on the title. The only way I found is the following:

<?php
preg_match
('`href="(.*)"`', $output, $matches);
if(isset(
$matches[1])) {
 
$output = '<a href="' . $matches[1] . '?' . drupal_get_destination() . '">' . $row->node_title . '</a>';
}
echo
$output;
?>

This works fine but it is not very elegant. So I wonder if there would be another way to proceed. Idea would be to override the code snippet which outputs the HTML for this field. We will then modify it appending the query string to the "href". More elegant ... Is there a way to do it ? Thank you.

Termscience April 21st, 2010 @ 8:03pm

my approach is a little different for views-view-field--front-page--page--title.tpl.php :

<h2><?php
list($p1, $p2)= explode('">', $output);
$linktitle = substr($p2, 0, -4);
$anchor = substr($linktitle, 0, 74);
if (
strlen ($linktitle) > 74 ) {
$anchor = $anchor.'...';
};
$output=$p1.'"'.' '.'title="'.$linktitle.'">'.$anchor.'</a>';
print
$output; ?>
</h2>
Fiona May 6th, 2010 @ 7:43pm

I have a website powered by ecommerce and would like to switch to Drupal. Since I am not very skilled it is not easy for me, but with useful info from your website I think I will be able to do that. Thanks a lot!

Hilongos July 8th, 2010 @ 1:15pm

You rock! Keep it up drupal world!

alex July 22nd, 2010 @ 12:42pm

Thanks for great useful tips. I start learning Drupal since it was the best CMS now according to most of friends of mine.

Comments are closed

If you want to ask a question or have something to add please contact me.