Warning: geekery ahead! If you're an Advanced Template user and want to add even more fun stuff to your blog, this post is for you. If you're a Basic Templates user and want to display the photos recently added to your blog all in one spot, you already have this functionality available as part of our Mixed Media layouts.
When you add an image in a post in TypePad, the backend generates a whole slew of image thumbnails that you can access via special TypePad tags. In this tutorial, we're going to use those tags to display a small gallery of image thumbnails in the sidebar of a blog. The special tags will generate a squared thumbnail of the first image inserted into each post, which link back to the associated post's individual archive URL. Below is an example on a live blog:
The last image in this example is a placeholder that links to a post that doesn't have an image associated with it. Your placeholder image can be anything you'd like, you'll just want to make sure it's the same dimensions as the thumbnails you're generating.
The code for the above example:
<h2 class="module-header">Recent Photos</h2>
<ul class="sidebar-thumbnails">
<MTEntries lastn="10">
<MTEntryPhoto>
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="<$MTEntryPhotoURL spec="115si"$>" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>
<MTElse>
<!-- Posts without images show a placeholder -->
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="http://example.typepad.com/noimage.gif" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>
</MTElse>
</MTEntryPhoto>
</MTEntries>
</ul>
And the CSS used to style the thumbnails:
.sidebar-thumbnails {
margin: 0;
padding: 0;
list-style: none;
}
.thumb img {
margin: 0 5px 5px 0;
border: 1px solid #000;
float: left;
}
You can, of course, use CSS to style the images however you wish. The thumbnail size is determined by the <$MTEntryPhotoURL spec="115si"$> tag. In this case, the thumbnail is 115 pixels wide and 115 pixels in height. There are eight different thumbnail sizes available so you should be able to find one that fits your blog's design.
