Blogger Post Summaries & Thumbnails, Part I

Monday, September 05, 2011


So I stumbled on some Blogger templates and decided to give my poor, tired blog a makeover.  I fell hard for the pretty ones with the flyout menus, post summaries, thumbnails and all.  Unfortunately, like so many of my flirtations with pretty things, it ended only in despair and disappointment.  My blog ended up looking nothing like what the previews promised, mainly because:

  • - The thumbnail images were stretched to fit, instead of cropped.  They looked absolutely atrocious unless the first picture in all my posts happened to be square.
  • - The preview text was one big blob of text since HTML elements like line breaks, coloring, and bullet points were being stripped.
  • - I couldn't use an image other than the first in a post as the thumbnail preview

That can't fly!  I did some digging and cooked up a short script to generate summaries.  It should work with most Blogger templates, and for sure the out-of-box ones.  Here's how it looks applied to the default "Simple" template.  I can create posts with any formatting and images of any size.

The Home page shows the first few lines of each post, with a "Read More" link to the full post.  Note that formatting like linebreaks and bullets are preserved.  The 200 x 200 thumbnails are then cropped from the top left corner of the first image (unless otherwise specified) in the post.

Read Part II for how to implement this.


Post a Comment