DIY Thesis: almost all you need to know about post images and thumbnails

by Kate Foy on 2 May, 2009

in Blogging, Featured

Most blog owners understand the value of images in posts. Indeed, if you are like me, then you’ll see the right image as a powerful part of a post’s meaning, as well as a vital element in the aesthetic appeal and readability of your blog. I try to use an image in each blog post, though lately, and because I couldn’t get Thesis to play the way it was intended, I’ve been posting plain rather than fancy.

Thesis gives you the option to use ‘teaser’ posts on your blog page, and also in an archive page if you choose to have one. These teaser posts also have the capability to show thumbnail images auto-cropped down from your blog post, or if you prefer,  to show another image which you need to crop and insert manually. This is the look and functionality I wanted for my blog.  Now whilst there are boxes to tick in the Thesis Options and Design Options pages to get you started, and whilst it all sounds easy – and really is once you get the workflow right – there’s a bit of organising to be done before you can start hitting save buttons with confidence.  This post is about how I got what I wanted … finally.

So, first up I wanted to know how to organise and where to store my images for posts. I also wanted to activate automatic cropping of a post image to use as the thumbnail image for that post.  I wasn’t clear about the best place on my server to store images; there seemed to be several alternatives both inside and outside the WP installation. Then there was the issue of ensuring that the images didn’t get ‘lost’ somehow in future upgrades; broken links aren’t good, and lost images are a disaster.

One of the plusses on Thesis is the clear ‘on-board’ instructions you get in the Options and Design pages; click the plus button beside a header and the instructions cascade down. However, despite the hand-holding and the simplicity of the WP Media Uploader, my post images weren’t making the grade. Some were too large, spilling out of the post, filling the screen or the sidebar. When I sorted the sizing issue, my post images refused to appear as thumbnails – I had chosen the teaser option under Homepage Display in Thesis Options. What to do about all this? Here’s what I did.

  1. First up, you need to ensure that your post images are the optimal size for the particular post layout you have chosen for Thesis. This is very important to avoid sizing error messages and the ugly spill over that happens when images are too big or oddly shaped.  The optimal size will vary according to the Thesis layout you have chosen for your blog i.e.,  whether you have a one column,  two-columns, or a three-columns layout. On this blog which uses a two-columns layout and a specific font size, it means that the longest edge of my post image should not exceed 520 pixels. So, at the outset you may need to resize your images. I use a Mac, so if any of my images are larger than this – and lots are – I use an Automator script that resizes images.  If you’re not cluey on creating your own scripts with Automator, then go to Mactips Resize Images with Automator on MacTips – incidentally, also created with Thesis. You can find the maximum and optimal sizes for images to suit your own layout in the Thesis Users’ Guide. Very handy.
  2. Store your resized images in a special folder on your hard drive. You’ll want copies … just in case. Back ups are good, right?  I name mine ‘Post Images for Blog’ and colour the folder green for go. OK, it works for me! A tip at this stage: try to avoid spaces in the name of your images – use hyphens and keep the names short and sweet.
  3. Now comes the interesting part; where to park your images on your server. You could choose to store them within your WP-content folder in the pre-existing Uploads sub-folder, or park them outside the WP-content folder, but at the same root level in a folder you’ll create and call ‘Images.’  Geting images from your computer is easy enough. Whether you want them in the Images folder or the Uploads folder, just FTP them up.  You could also use WP’s Media Uploader tool. Just click on the ‘Add New’ under the Media tab in the sidebar, choose the files from your ‘Post Images for Blog’ folder and they’ll be added to your Media Library and sit inside the Uploads folder. If you choose this approach, WP does some of the lifting for you, sorting your images into year and month of upload.  If this sounds like your kind of workflow and organisation, then a good choice for you is to keep your images within the Media Library on WP. You should be aware though, that if you keep your images outside the WP installation in that Images folder you created, then your WP database will be nice and lean and portable. Apart from the size issue, the advantage to storing your images outside WP is that should anything terrible happen to your WP files, you would still have copies of your images on the server.
  4. When the images are in their chosen position on the server, check everything is OK by writing a test post and inserting an image.
  5. In the WP Media Uploader, click the Insert link. Choose the image you wish to insert from your Images folder, your Uploads folder, or from the Media Library – wherever your images are stored.  Copy the image URL, including the http://, and paste it into the Post Image and Thumbnail pane which appears below the post pane in WP. This is where storing your images in the Image folder pays off: the URL is much shorter e.g., http://yourdomain.com/images/yourimage.jpg compared with http://yourdomain.com/wp-content/uploads/2009/05/yourimage.jpg   However if you use the Media Gallery, there’s a little payoff. When you check an image in your Media Library, the URL appears ready to copy and paste. Don’t click ‘Insert Into Post’ but take the copied URL and paste it in the Post Image line of the Post Image and Thumbnail pane.  Here you can also choose whether or not to add a frame to your image.  Now, if  you have enabled teasers, no matter which directory/folder or method of storage you’ve used, the teaser image of your post image will be cropped automatically and inserted wherever on your site the teasers are enabled. Leave the Thumbnail Image line empty if you want the same image for the thumbnail as your post image.  If you want another image for the thumbnail, you will have to prep this image to 66px x 66px, crop, save in another folder (Thumbnail Images for Blog or some such),  and upload as per 1-3 above.
  6. Save as a draft and preview. Adjust if you wish … delete the test post, and you should be good to go.

I titled this post ‘almost all you need to know’ … there’s always something more! Hope this has helped.

Previous post:

Next post: