Displaying a Thumbnail of an Entry Image with the Title of a Post

Movable Type's WYSIWYG editor makes it super easy to upload one or more images in any post. Resizing them and moving them around a bit is also a snap in most cases. But what if you want to display the titles of your most recent entries somewhere else, preferably with a thumbnail pic of one of the images in the post? Are you stuck with also displaying the entire body of the post to get at the image(s)? Of course not!

Each time you upload an image into an entry in Movable Type, an 'association' between that image and the post is created. So the image is not just some HTML code inserted in the post, no, there is an actual relationship stored in the database too. This allows you to do fun stuff in your template code: listing all the images associated to a post? No problem, just bring out the <mt:entryassets> tag and loop right over them.

The fun thing about this tag is that as it puts each successive asset in context inside the loop it encloses, you can use any asset-related tag in Movable Type's arsenal. Want to display a list of thumnails linking to the full version of all images in an entry? Use this:

<mt:entryassets type="image">
<a href="<mt:asseturl>"><img src="<mt:assetthumbnailurl width="50" height="50">"></a>
</mt:entryassets>

I just ran this little snippet for all entries in this blog, and this was the result:

Jazzing this up just a little more to also display post titles (and to only display something if the entry actually has an image):

<mt:entries>
<mt:entryassets type="image" limit="1">
<mt:if tag="asseturl">
<a href="<mt:asseturl>"><img src="<mt:assetthumbnailurl height="30">"></a>
<a href="<mt:entrypermalink>" style="font-size:30px"><mt:entrytitle></a><br>
</mt:if>
</mt:entryassets>
</mt:entries>â€‹

The result: