Weekend Project: Displaying Recent Photos in Advanced Templates

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.

Comments

[Account Deleted]

Had plans to use this in an advanced template, so I added the code, tweaked it to show 3 images on each line with padding around, uploaded a 'no image placeholder', and then viewed it on an ipad.
Each image displayed on a new line - with a bullet point before each one and looked so bad, I had to remove the code as it looked unprofessional :o(

[Colleen]

The "list-style: none" bit of CSS is what hides the bullet points. Did you happen to edit that out of the code?

[Ken Carey]

No, I'm still Ken Carey last time I checked. It's just that I see this whole new dimension and how fun it will be when I get time for it. I'm really into photography, too

KEN CAREY