Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Displaying a Field before the Node's Title in Drupal 7

Parent Feed: 


Drupal allows you to easily change the order of your displayed fields using the Manage Display option for your content types but it does not allow you to change the order of the title field (because this field is rendered directly from the node template). But there may be times that you want to display your custom field(s) before the title field. For example, if you have an image field that you want to float to the left of your title and remaining node content.

Displaying a field before node title in Drupal 7

Luckily, the solution is quite easy to implement.


Create a node template file for the content type you want to change the title order on. Note that if your theme already has a custom node template for the content type you want to change then you can skip to step 2.

If you don't already have a specific node template in your theme for this content type then you can simple copy the node.tpl.php from the /node directory in your root Drupal install file into your theme directory and rename it to node--CONTENT_TYPE_NAME.tpl.php.


If your content type's machine name is article then your copy of the node.tpl.php file will be named node--article.tpl.php.

If your content type's machine name is team_bio then the file will be named node--team_bio.tpl.php. Notice the underscore in the content type name are retained and not converted to dashed.

IMPORTANT: Be sure to clear your site caches so your new template file will be used.


Once you have a custom node template for your content type all we need to do is make a slight change to it. With Drupal 7 we can harness the power of render and hide within the template files.

This is a stripped down and simplistic version of what your current custom node template might look like:


print $title; ?>

  print render($content); ?>

Now we can modify our template to manually output our image field before the title like so:

print render($content['field_name_of_image']); ?>

print $title; ?>

  print render($content); ?>

And when a node of the template's content type if rendered it will now print the image before the title and when the remaining content is output using print render($content); Drupal will know that the image field has already been output and will now leave this off when the rest of the content is rendered.

Displaying a field before node title in Drupal 7

Render and hide are really quite powerful features to use in your theme's template files. For example, you can use hide($content['comments']); to prevent the comments from being rendered with render($content) and then manually render them later in your template using render($content['comments']).

The most important concepts to grasp when dealing with render and hide are:

  1. render($content['FIELD_NAME']) will manually print a field in your template.
  2. hide($content['FIELD_NAME']) will prevent a field from being rendered with the content is printed using render($content)
  3. You can always manually print a field that has been hidden from the main content rendering
  4. If you manually print a field using render then it will not be output when using render($content)
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web