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"$>
<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:
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.