How To Show Thumbnail Images in Advanced Typepad Template Excerpts

If you use advanced templates with Typepad, you might not be getting optimized images in your excerpt listings. In my case, the main index page was using “thumbnails” that were sized via CSS but in fact were the full size images. This slowed down the page load time for sure.

In the Typepad settings there is a way to enable thumbnails in excerpts, but this only works for built-in templates and themes. If you use an advance template, you may have to enable this behavior yourself.

First look at this code, it is the excerpt code from my advanced template, it shows the image and the content.

<div class="entry-body">
  <MTEntryPhoto>
    <img src="<$MTEntryPhotoURL$>" class="excerpt-image" alt="Article Excerpt Image"/>
  </MTEntryPhoto>
  <$MTEntryExcerpt$>
</div><!-- .entry-body -->

The main thing to notice is the img src “<$MTEntryPhotoURL$>”. This is replaced with the URL path to the image. This is also the problem, because the link goes to the full size, original image.

After much searching I found this page which explains about Typepad’s ImageLink object. Two things are most interesting here: the 4 different sizing renders (pi, wi, hi, si), and the Valid Sizing Specifications grid.

Pay attention to that grid, because it defines all the sizes and rendering Typepad can do for you.

In my case I wanted the thumbnail to be 250 pixels wide using the “wi” scaling. To apply this sizing to the image in my advanced template, I made one small edit to the above code:

<div class="entry-body">
  <MTEntryPhoto>
    <img src="<$MTEntryPhotoURL spec="250wi"$>" class="excerpt-image" alt="Article Excerpt Image"/>
  </MTEntryPhoto>
  <$MTEntryExcerpt$>
</div><!-- .entry-body -->

Notice the bit added to the MTEntryPhotoURL tag: spec="250wi".This should be obvious what it does, it sets the “specification” (spec) of the image loader. You must use the options available in the grid or the image won’t show up.

When done correctly, Typepad should load the 250px image instead of the original image.

If you look at the URL of the image now, you will actually see the “250wi” appended to the end of the URL.

For reference, here is a copy of the sizing grid: