Tip: A grid of post thumbnails for index/listing pages

Our thumbnail and summary script was such a success that people have been asking us for further and further customization based off of it. The most frequent request has been the ability to set just a thumbnail image for the blog post and use it to create a grid of images.

Your wish, our command.

The script we've created can be seen as a fork of our original thumbnail script, combined with our interactive captions script.

The script grabs the first image of each of your blog posts, resizes (and converts to a square if you specify), and re-parses the structure so that the thumbnail image becomes a link to the post. To make this work we've included the LightBox disable script so that clicking on the thumbnails doesn't open up a Lightbox instead of the intended behavior of going to the blog post.

Clean version of the script is here.

To limit this functionality to only certain pages or types of pages, you'll want to learn about the different page types, and choose the one you want to use. For example, if you only want it to show on "index" page types you'll want to put the above script into an "if" statement such as:

<b:if cond="data:blog.pageType == &quot;index&quot;">

</b:if>