Post Thumbnails in the Blog List View

When WordPress came out with version 2.9 in the fall of 2010, one of the best things they added was the Post Thumbnail for featured images.

For art sites, this was something of a Godsend.  I had previously been using YAPB (Yet Another PhotoBlog) for inserting one image as the main image for each post.  This one image would then appear at different sizes in different types of views, such as a small thumbnail in the blog, archive and category list view, and a large image in the single post view.

But, my hosting service strongly encouraged me to stop using YAPB, as they said it was very resource-intensive and was one of several plugins for WordPress that were causing my sites to bog down.  So I spent weeks replacing the YAPB images on almost 6 years worth of posts on my art site (nearly 300 posts) with the new featured images post-thumbnails (whew!).  I also edited the code files to get the images to appear just as I wanted them at the time.

It was exhaustive but in the end a very good thing, because once again, all I had to do was insert one image in my post, and it showed up in many places, while apparently using less resources.

See examples of Post Thumbnails and Featured Images in use:

Issues with New Designs

One of the other great things about WordPress is that they are very innovative and are continually improving their features and code, streamlining some things and adding others.  The result is that what was once just a little blog engine has become the most popular and one of the most powerful and versatile CMSs (Content Management Systems) around.  Of course, the downside of that can be that your website themes and files can become quickly outdated, requiring more weeks of learning and re-coding to keep things up to date.

For that reason, I often use a website design tool called Artisteer to begin a new design for my websites.  Once you have settled on a design within the software, it spits out (almost) all the files and images one needs for various types of websites, including WordPress websites.  Every exported design needs a bit (or more) of design and code tweaking to get them to look and work just the way I want them to, but otherwise it’s a pretty good tool.

However, all this innovation has resulted in some significant changes in the code for WordPress, and thus the code that Artisteer generates in their latest version has also changed quite a bit in just a few months.  And unhappily, from my perspective, they broke the featured image function.

For whatever reason, the themes exported from Artisteer no longer support the large image part of the Post Thumbnail function.   Personally, I’ve got too much invested in this feature on far too many websites to abandon the use of it (especially as it would mean replacing all 300 images I’d already replaced yet again!  And then some!).

So I’ve searched the web, and asked questions on several forums to find answers about how to fix this, but only one person was willing or able to give me a hint.  (Hat tip to Amy on the Artisteer forums ).

So, with Amy’s help, and a bit more research and a lot of trial and error, I have come up with the following code fixes.  These may not be the only or even best ways to do these things, but they work for me so far.  Should anyone know of a better way, I’m all ears!

Code Fixes for the Featured Image and Post Thumbnail Functions in Artisteer Themes

To enable Artisteer-generated files to once again implement the featured image function (files shown in bold italic; code show in bold):

1. To show your featured image in your single posts and/or pages:

   in these files: “content-single.php“ (for posts) and “content-page.php“ (for pages), move or insert this code ‘thumbnail’ => theme_get_post_thumbnail(array(), between ‘before’ => theme_get_metadata_icons(‘edit’, ‘header’), and ‘content’ => theme_get_content(),

2. If you want to size the featured images to be larger than the thumbnails, instead of  ‘thumbnail’ => theme_get_post_thumbnail(array(), use this code:

   ‘thumbnail’ => theme_get_post_thumbnail(array(“size” => array(600, 300))),

   changing the sizes to the sizes of your choice (here, 600 is the width in pixels, and 300 is the height)

3. If you want to move the default location of the thumbnails in the blog list views from above/beside the post title and header metadata to below them:

   in this file: “library/wrappers.php“ move echo $thumbnail; to between echo $before; and ?>

4. If you want your featured images and post thumbnails to be aligned right instead of left:

   in “style.css” find: div.avatar{  position:relative;  margin: 0 5px;  border: 1px solid #aaa;  padding: 1px;  background: #fff;  float:left;} and change the float from left to right.  Warning: this may also change the float of your comment avatars; I can’t really say, so proceed with caution.

5. Then, on your site, under Dashboard > Appearance > Theme Options, under Featured Image, set:

   Use featured image as thumbnail    

   Yes

   Use auto thumbnails    

   Generate post thumbnails automatically (use the first image from the post gallery)

Your code and style in these files may be slightly different than mine, so adjust accordingly.

Hope this works for you…and now I’ve got it all listed conveniently in one place until the code changes yet again…

Plus, for reference purposes, here are a couple of posts in the WordPress Codex explaining the use and purposes of the Post Thumbnail and Linking to Post or Larger Image.

Related posts:

1. Designing Your Own Theme for WordPress, part I
2. Top 20 WordPress Plugins for a Complex Site
3. PhotoShop Tip: Using Actions to Resize Images