Recipe for displaying a image cropper thumbnails

I often have the need for some code that will intelligently display a thumbnail if one is available for a post. Below is a simple recipe that will allow you to easily display an image cropper thumbnail if one has been generated and if not, fall back to a thumbnail auto-generated by Movable Type.

This recipe utilizes a relatively unknown construct in Movable Type called setvartemplate which is best described as a function or a "macro" for those who remember such things from programming.

Here is how it works:

  1. Create a Custom Field to hold an optional "Featured Image". The intent of this custom field is to allow for admins to select an image they would like to use when featuring the entry on their homepage (or elsewhere). When editing a post, upload into this custom field the original image you want to crop. Do NOT upload the cropped version. The custom field should expose a tag named "EntryFeaturedImage".

  2. Create a Thumbnail Prototype with the dimensions you want.

  3. Add the following template code to a template module that is ideally included by every page on your web site.

    <mt:setvartemplate name="featured_image"><mt:section trim="1">
      <mt:ifnonempty tag="EntryFeaturedImage">
        <mt:setvarblock name="aid"><mt:EntryFeaturedImage></mt:setvarblock>
        <mt:setvarblock name="thumbnail"><mt:EntryFeaturedImageAsset id="$aid"><img src="<mt:CroppedAsset label="$pref_c"><$mt:AssetURL$><mt:else><$mt:AssetThumbnailURL width="$pref_w"$></mt:CroppedAsset>" alt="<$mt:AssetLabel encode_html="1"$>" class="center" width="<$mt:var name="pref_w"$>" height="<$mt:var name="pref_h"$>" /></mt:EntryFeaturedImageAsset></mt:setvarblock>
      <mt:else>
        <mt:setvarblock name="thumbnail"><mt:EntryAssets type="image" lastn="1"><mt:CroppedAsset label="$pref_c"><img src="<$mt:AssetURL$>" alt="<$mt:AssetLabel encode_html="1"$>" /><mt:else><mt:setvarblock name="w"><mt:AssetProperty property="image_width"></mt:setvarblock><mt:setvarblock name="h"><mt:AssetProperty property="image_height"></mt:setvarblock><img src="<mt:if name="w" gt="$h"><mt:AssetThumbnailURL height="$pref_h"$><mt:else><mt:AssetThumbnailURL width="$pref_w"$></mt:if>" class="center <mt:if name="w" gt="$h">wide<mt:else>tall</mt:if> alt="<$mt:AssetLabel encode_html="1"$>" width="<$mt:var name="pref_w"$>" height="<$mt:var name="pref_h"$>" /></mt:CroppedAsset></mt:EntryAssets></mt:setvarblock>
      </mt:ifnonempty>
      <$mt:var name="thumbnail"$>
    </mt:section></mt:setvartemplate>

Once this is done, this is how the code is invoked:

<$mt:var name="featured_image" pref_c="Thumbnail Prototype Name" 
     pref_w="Default Width" pref_h="Default Height"$>

And this is how it behaves:

  • First, the macro attempts to find the master image to use. It first looks to see if a value exists for the custom field called "EntryFeaturedImage". If one is not found then it extracts the first image found from the body of the entry itself.
  • Once the master image is found, the macro checks to see if a thumbnail has been generated for the image using the name you identify in the pref_c attribute/parameter.
  • If an image cropper thumbnail cannot be found, then a thumbnail will be generated for you automatically using a width of pref_w and a height of pref_h.