Feature
Post

Category
Code


Enhance Search Results with Thumbnails

Take a look at most search results pages and what do you typically see: Each result has a title, a short excerpt, some metadata, and maybe a thumbnail image. The default search results from a Movable Type blog, though, will show the Body of each result. To me, this introduces some problems. First, each post could be quite long — much longer than one wants to read on a results page. And each result may or may not show any images, depending on whether the images are in the Body or the Extended section of the entry.

Fortunately, we can fix these problems, and at the same time learn a new way to pass variables to included modules.

In our Entry Summary template module, we want to modify the template where it outputs the entry body to match this:

<div class="asset-body">
	<mt:if name="show_thumbnail">
		<mt:entryassets type="image" limit="1">
			<img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:assetlabel>" class="thumbnail" />
		</mt:entryassets>
		<$mt:EntryExcerpt$> 
	<mt:else>
		<mt:entrybody>
	</mt:if>
</div>

This is pretty simple: We test the show_thumbnail variable, and if it’s not empty we find the first asset in this post and display it as a thumbnail. Notice that when we display a thumbnail, we output the entry excerpt rather than the entry body. By default, the excerpt strips out HTML, so we don’t take a chance of the image displaying twice.

Our Search Results system template only needs a small change:

<$MTInclude module="Entry Summary" hide_counts="1" show_thumbnail="1"$>

The <MTInclude> tag passes any attributes it doesn’t recognize as variables in the included module. There are two benefits to this method. First, it’s a little shorter than typing a full <mt:setvar> tag for each variable. And, the variable is local — it’s only available inside that included module (and any modules it calls). You don’t have to worry about conflicts with other variables of the same name in the Search Results template.

With a little CSS, our search results can look something like this:

Screenshot of search results

Screenshot of search results

It’s a small addition to your search results, but it can help your visitors quickly scan the returned results and find content they are interested in.


  1. By kamal posted on August 6, 2008 at 8:14 am
    Want an avatar? Get a gravatar! • You can link to this comment

    hi, great tut, i’d like if possible; to do one as this for the wordpress, wordpress search need really this amazing search result with thumb img.
    any way, thanks for all

  2. TrackbackMovable Type Monday: Movable Type 4.2, Pro, Mid Century Theme, Tutorials Galore! | The Blog Herald