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

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., compared with   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.

Learning as you go: me and my blog on Thesis

No, not that thesis as in dissertation … been there, done that … but the Thesis theme that graces this blog: DIYThesis a WordPress theme by Chris Pearson.

Now I bought Thesis ages ago because I wanted the freedom to customise my blog’s design without the pain of learning all that coding stuff. I happen to believe that good design matters a great deal. What I wanted was a theme that would provide me with the means to design the look I want – in this instance what’s known as a ‘magazine style.’  I was attracted to Pearson’s design work with other free WordPress themes. In fact I had used his Cutline and Neoclassical themes for quite a while on other blogs. They were clean, minimalist – my preference – and robust in the back end. See, I learned early on to toss the jargon round without necessarily having a clue about the back end of anyone’s blog, let alone my own. More importantly, I came to understand why, like a good auto engine, a good blog backend was as important, if not more so, than a shiny exterior. When Chris Pearson announced the release of the new Thesis theme last year, I was hooked – sorry, no pun intended. The hooks feature of Thesis is what provides the design’s flexibility as well as its functionality.  And Thesis continues getting better. Updates – it’s at 1.5 now – are released pretty regularly, and with each iteration, the theme gets easier to use. Once you’ve bought the theme, your upgrades are free for ever. Nice.

However, I’d be fibbing if I said Thesis was the easy ride I was expecting; it isn’t.  The good news is that there is a responsive Thesis community, and support for newbies like yours truly is provided along the way. I’ve taken my frustrations to the DIY Thesis Forums on several occasions. I’ve heard back smartly and with support from good sports like administrators KingdomGeek and godhammer. There are also some pretty crash-hot Thesis users like Kristarella and Sugarrae who have produced tutorial posts on tweaking the design of Thesis to get the look you like. Again, for a total tyro this is a fantastic resource. There are plenty more at work on Thesis sharing the expertise around. I’ve learned a heck of a lot as I’ve gone along, and I love learning.

So why am I writing this?  Well, I’ve had a successful day or two playing around in the back end – learning on the job – and been helped along the way by the resources that are out there. One thing eluding me was getting that magazine look design I’d craved at the outset. I trawled through the Thesis support forums, and there appeared to be lots of queries that echoed my own, but which didn’t quite answer what I wanted – exactly.  So I shot off a query not too long ago and back came the goods; I got the answer I wanted.  So, time to share the findings around.

In my next post I’ll take you through how I got to solve my problem. I’ll deal with prepping your images, choosing the best place on your domain to store them, and how to get them into your posts painlessly. I hope you will return.

Like a garden, and maybe even life – a blog is a work in progress!

Reblog this post [with Zemanta]