I want to take the first image from the images each node has in its body, to use it as a thumbnail when displaying nodes in a view. How can I do this?


6 Answers 6


I've used this regex in my views templates for this task -- it works by grabbing the src from the first image tag in the body content (assumes using fields view style):

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $fields["body"]->content, $matches);
$first_img = $matches[1][0];

if (!empty($first_img)) {
     print "<img src='$first_img'>";

You can also pass the source to your imagecache theme function, as Jim and jimajamma suggest, to scale the image.


And, if Jim Kirkpatrick's solution doesn't work for you, and you do need to screen scrape an image out of your body field, you can create a views template that does that for you.

SO, if you have the Node Body as a field in your view, and assuming the view name is stories, the display is page, and the field name is body, that template would be called views-view-field--stories--page--body.tpl.php which you can find by clicking on the Theme Information link in the view's Style Settings. Normally all this template does is output the formatted contents of the field, but what you could do is replace it with something like this:



  if ($baz) {
    print '<img class="thumb-me" ' . $baz . '>';
  } else {
    print '<img class="thumb-me" src="/sites/default/files/default-image.png">';

This could most probably be done with one quick regex but basically what it is doing is exploding the contents of the body first by the beginning of an <img tag, then chopping it off by the closing >, which returns the contents of the first image in the body.

This is then output re-wrapped in an easily themable image tag so you can use CSS to change the size. Not too optimal, but quick and easy.

To put this into play, put that template in your theme directory and click "rescan template files" in the views Style Settings/Theme Information area mentioned above and make sure it highlights this new template. After that, hopefully there are no typos that result in a WSOD :)

Now, if you are using another CCK field for this, you would change the node_revisions_body to something based upon that field, so a quick dsm($row) in the template will show you the information you need to find that (or if my system is set up differently than yours, etc).


This module makes things much easier: Teaser Thumbnail.

The Teaser Thumbnail module allows you to automatically generate thumbnails for your node teasers and RSS feeds from the pictures included in the body or the attachments of the nodes. This module depend on ImageCache 2 and works with views.


Assuming you have something similar to a field_images imagefield on your content type:

  1. Install ImageCache and set up some 'Scale and Crop' or 'Scale' presets for the thumbnails you want.
  2. In Content management -> Content types -> {your content type} -> Display fields (tab) you can set the image field to use your new imagecache preset in teaser.

If you don't have an image field, things will be much harder to be consistent and will certainly need more editing. However, you can install Image Resize Filter, add it to your input format and use that to make nice thumbnails from within your WYSIWYG editor.


I solved this by installing Computed Field

This module Executes a piece of PHP code on every save/update action.

After installing and enabling it, add a separate Compute field to your Content Type.

Write a PHP code to Select the first IMG tag in body.

Computed Code

preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $entity->body[LANGUAGE_NONE][0]['value'], $matches);
$entity_field[0]['value'] = $matches['1']['0'];

Display Code

$display_output = $entity_field_item['value'];

Data Type


Now this field will be saved in the Database. You can access this field in your Views by usual method.

Hope this helps.


For Drupal 7 the best way is used Teaser Image module. This module automatically generates thumbnail for teasers and RSS feeds from images included in node body (or imagefield which attached to node).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.