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

48 thoughts on “DIY Thesis: almost all you need to know about post images and thumbnails”

  1. Kate, how I wish I had time to get stuck into this. It is so helpful to be talked through the process, and I need to get more proactive with all my websites. But right now, I have a lot of self discipline to find and two scripts to learn,.

    I’ll be back…

  2. That was really useful, thank you! Just getting started with Thesis, and you solved my first problem for me :)

  3. Excellent post! Thanks for explaining everything in such detail.

    Having an image-focused site, I was wondering how (after inserting the image code into the Post Image and Thumbnail pane) I can still include a caption. If I can figure that out, then everything will be smooth sailing from now on.

    Thanks again!

    -Caroline
    .-= Caroline´s last blog ..Lycée Pasteur SPOTTED: Soft and Grey =-.

  4. Jo and Caroline, thanks for your kind comments. Caroline, I’m on the hunt for a plugin that will add captions to post images via the ‘alt’ text pane in WP. Will let you know when I find out.

  5. Hi! I have a quick question, though it’s a bit confusing: Do you know of any way to keep thumbnails on the “teasers”/excerpts but NOT have them show up on the full/featured posts? If you take a look at my website, you’ll see what I mean. I have one featured post followed by four excerpts. The thumbnails are fine for the excerpts, but I like to use full-size images in the posts themselves, so when I post a “featured” article, it shows both the thumbnail AND the full-sized image right next to each other. It’s a bit frustrating. It should be noted that I *don’t* use the “Post Image” option (just the Post Thumbnail) because if I ever change to another WordPress theme in the future, I’d hate to have to go back and re-insert images in all my posts. I use the classic image upload form and insert full-size images this way, but then I also upload thumbnail sizes so the excerpts look nicer on the front page. But like I said above, this causes a conflict for the featured post, because it automatically shows both images (full-size and thumbnail), which looks silly.

    Thanks if you have any suggestions.
    .-= John´s last blog ..Star Trek Cologne: For People Who Can Afford Never Having Sex =-.

  6. Hi John. You’ve raised an interesting one here. I wonder why you are not using the ‘post image and thumbnail’ feature on your posting page. As you know, this will automatically crop your featured post image down, once it gets replaced by a new featured post and in turn becomes a teaser image. This is surely the easiest way to go, and will avoid the double image in a featured post which you are currently getting by choosing a thumbnail and a full image for your featured post. Second, I don’t quite understand your concern about having to go back and reinsert images in all your posts should you change to another theme. Would this be the case if you go the ‘post image and thumbnail’ way? This one I can’t answer. If I were you, I’d head over to the Thesis forums and ask the question there. Good luck, and let us know if you get a reply. Did this help?

    PS Just had a look at one of your posts, and I see that you are using a separate primary image post to the thumbnail image in ‘I Love You Man.’ Is this what you want i.e., a different image than the teaser? If so, you can do this. See the Thesis Options page, click on the + sign before the Default Thumbnail Settings. You might want to try and set the thumbnail above the headline. Would this work for you?

  7. Kate –

    Can you get me in touch with John? I understand exactly what he’s saying and would like to interact with him on it if possible….

    Thanks – KD

  8. Hi, Kate. This is an excellent post. Unfortunately, it does not solve my problem. Excerpts work fine, the images do appear, but not on the front page. Images appear with the full article, which is good. But I also want them on the front page. Any thoughts appreciated. You put up some ‘image battle’ here. Admirable!

  9. Hi Alla, thanks for stopping by.

    I take it your home page isn’t set up to show your blog posts – maybe it’s a ‘landing page’ with different material but you still want the images you are using in your blogposts to appear here? I also take it you are not using the Thesis ‘Default Template’ for your home page? You may have set up a custom template, or be using the ‘No sidebars’ template. Is this the case? As far as I am aware, you have a few alternatives – and I am sure there will be lots more; there are uber-Thesis users out there who are far more advanced than I am – I’m learning this as I go, so the suggestions I make here are ones that beginners like me find easiest to implement. I pass them on in the spirit of learning! :-)

    So for starters, why not use Thesis’ onboard Custom Image or Multimedia box options? You access these via your ‘Edit Page’ page. You just paste in the path (html) to a single image e.g., http://yoursite/wp-content/uploads/images/yourimage.jpg (or whatever the path to wherever you store them), or paste in the html of an RSS feed to (say) your Flickr account set or group etc. This can be configured in lots of different ways. I recommend WP’s flickrRSS plugin – but you need a Flickr account to make this work. It’s easy to set up, has lots of configuration choices, including putting it as a widget in a sidebar or footer, or a header or anywhere in any of the ‘hooks’ that Thesis provides. I recommend that you download the Thesis Open Hook plugin if you haven’t already got it. It makes the whole business of choosing a place to put your code, pasting in and activating it a total snap!

    Let me know how you get on.

  10. Hi there, First I’d like to say this was a fabulous post. it answered a number of questions that I had. I do however have one more. I got the image thumbnail to work when I manually resized an image and entered the url for it, however when I leave the thumbnail information blank to let Thesis auto crop my original image all I get in my teasers is an active “link”…no image (thumbnail). Any thoughts what might be wrong?

    Thanks.

  11. Hi Jen. Thanks! Glad to help.
    Couple of things: where are you inserting the url for your post (main) image? Make sure it’s under the post pane in the ‘Post Image and Thumbnail’ pane. Remember don’t click the ‘Insert Image Into Post’ button in your Media collection. Secondly, are you wanting the same image for your thumbnail as for the main post image? There should be no need to crop the main image for the thumbnail, unless you want a different image. It should happen automatically.

  12. Hey Kate,

    Yes I took the url of the main image and put it under the Post Image and Thumbnail pane and yes again, I wanted the thumbnail to be the same image as the main post.

    I wanted to try both methods so the post where I used a different image for the thumbnail and cropped and inserted it manually under Post Image and Thumbnail, it worked.

    The post where I wanted to used the same image for both and left the url for the thumbnail under Post Image and Thumbnail blank, it didn’t work. No thumbnail image, just an active link.

    Now this is a conundrum.

  13. Jen, sounds like a conundrum but it’s probably something really simple – that’s always the frustrating part though, isn’t it! I don’t have a definitive answer to this one except to suggest you do what I would do in your position, i.e.,to try uploading a test image to another spot in your wp-content. That is, if you have been uploading to a folder of images, try uploading using the Media uploader in WP. This will result in a long header e.g., http://yourdomain.com/wp-content/uploads/2009/10/nameofimage.jpg Once again, don’t click ‘add to post’ but copy and paste it into the “Post image and thumbnail” pane, and see what happens. If you’ve been using this method, then try uploading to another folder somewhere within your wp-content. Fingers crossed!

  14. Hey Kate!

    Well that was weird. At the beginning I was FTP’ing my images to the wp-content/uploads/2009/10 folder and it didn’t work, but I tried your suggestion of using the Media Uploader and it worked like a charm. Thank you SO much. Sometimes it just takes talking it through with someone to figure it out.

    Thanks again. :-)

  15. Hi Kate

    Great article. You really helped me get a handle on using images in thesis. But! I was hoping you could help me with a variation on this…

    The design I have has thumbnail images in the featured posts and no images in the teaser posts. And I can’t have a post image in the actual blog post either. The bloggers need more flexibility than that. I could probably do some css hack, but I’m hoping there is a better way than that… any ideas?

    Thanks

    Thanks

  16. Hi Kim, thanks for dropping by. Send me a link to your site and I’ll have a look. Not quite sure what you mean by ‘The design I have has thumbnail images in the featured posts and no images in the teaser posts. And I can’t have a post image in the actual blog post either.’ Can’t promise I’ll have a solution, but will give it a go!

  17. I can’t unfortunately… it’s not on a public server yet. But I have uploaded an image so you can see what I mean http://yfrog.com/5efeaturesteasersj I’m figuring the normal way would be to have the top 2 as features and the rest as teasers. This is what my (unstyled) page looks like atm http://img7.imageshack.us/i/pageva.jpg/ and a single post http://img17.imageshack.us/i/postimagea.jpg/ which you can see looks silly with a post image in it.

    I guess the main questions are… can you have a post image that doesn’t show up in the actual post? Could I have a post image in a post and not have a thumbnail in the teaser? Can I have a thumbnail image that only shows up in a featured post, but not in the teaser?

    I can see it’s not something built in to thesis. I might have to suggest it to them for a future release. But I was hoping there was some code out there to do it…

  18. Hi again Kim. Thanks for the images which I think look fine. The two featured post and couple of teasers work well for you. You are talking about design issues here, and I believe it is possible to achieve what you want. Working backwards through your questions, yes, you can have a post image or a thumbnail image in a post and not have a thumbnail in the teaser by simply using the WP ‘insert image in post’ option, i.e., what you DON’T do when you are using the Thesis option to insert a post image and use the same image as an auto-cropped thumbnail for the teasers. Just select the size you want, and away you go. As to posting an image that doesn’t show up in the actual post … not sure what you mean here … maybe this is not a separate question?

  19. My problem is that I want to use the Post Image solely for the automatic thumbnailing. I hate it set so that the Post Images won’t show up in the actual post, but unfortunately, they still show up on my main Index page on my Featured posts. Is there any way I can totally remove their visibility and just use them for their thumbnail?

    I’m using Thesis 1.6, by the way.
    .-= Professor Beej´s last blog ..Reading Blogs vs. Reading Books =-.

  20. Hi. Yes, you can do this. First you need to resize the image you wish to use to Thesis’ thumbnail dimensions i.e., 66 x 66px. Upload the resized image to your Media files as usual, and insert the URL into the thumbnail image pane in the post editing area. Click the box to frame the thumbnail, if you wish, save and hey presto! The thumbnail will only appear in the teasers. This works for me.

  21. Nice article, very coherent. Unfortunately, I remain unable to accomplish this! Haven’t been able to even show full size images in single post pages when using the Post Image and Thumbnail pane. Been troubleshooting all day! ack

  22. Hi Kate,
    Excellent post. You the procedure very clearly and step by step. I am facing the problem of displaying thumbnails in teasers . Today I followed your step by step procedure even no use. It is showing thumb nail image as text in the place thumbnail.
    http://financialaffairs.in/2009/10/24/infoedge-q2-results-6-fall-in-profits/ For this uploaded the image and place the url in postimage field.
    What may be the problem? please help me out in this.
    Thank You
    .-= sailu´s last blog ..Zee to buy 9x for 70 crores? =-.

  23. Hi Sailu and thanks for your comment. It sounds as though the path to your image is not working. Check where your images are stored in WP – as uploads, or in another folder. You might want to experiment and retry pasting the resulting url into the Post Image pane. You might also like to check out the Thesis Forums and ask over there; there are plenty of heads over there that are better than mine for fixing these things! Good luck.

  24. Hi Kate,

    Is it possible to display thumbnail with the featured posts (not teasers)?

    It doesnt seem to work on my install… it works fine with teasers…

  25. HI, and thanks for stopping by. Here is my workaround to get a thumbnail sized image in a post with the same image as thumbnail in the teasers.

    In the posting pane, insert the image you want for your thumbnail using WP’s own ‘insert image’ capability, and choose the thumbnail size option, position etc., for your post. Then grab the URL permalink to the image in your Media Library and paste it in the Thumbnail Image part of the posting pane – the Thesis ‘add-on’. Select whether you want it framed or unframed and its position, and save. You should be good to go with the thumbnail appearing in the post and also in teasers. Hope this helps.

  26. Hi Kate,

    Thank you for your quick response. I followed the guide exactly and it wouldnt work, I really have no idea why….

    My Thesis just wouldnt create that automatic thumbnail for ‘featured post’ and display the exactly same image as in the permalink version.

    Anyway thank you for this post, it does help people figuring out how to use Thesis’ image feature… :)

    cheers….

  27. Well, that’s a bummer! This is a two-step, rather than a one-step process as we would all like i.e., first choosing and then inserting via the WP Media Library option, followed by a copy and paste of the URL of the image into the Thumbnail section. Ensure that you have pre-cropped the image to whatever dimensions you have specified in the Post Image and Thumbnail section of your posting pane first, OK? This could be the issue. Worth a shot … good luck!

  28. Using thesis Post Image and Thumbnail controls, can I ask how do you add a link to the image? The WP Media gallery does this well, but thesis doesnt seem to provide the field to handle it. Maybe a custom field? thanks for your help.

  29. Hi Kate

    How can I get an image to appear in my featured/teaser post at top of my Pages/sections?

    I can get thumbnails into the half width teaser boxes easily and it looks great: I have four boxed teasers with left aligned thumbnails on each all under my featured teaser (the featured teaser is full column width and showing a few lines), but the featured teaser needs a thumbnail image too and I can’t seem to get this to work the same way as the boxed teasers underneath??

    Would be even better if the pic on the featured post could be slightly larger than the teaser thumbnails underneath. This is just an extra question, don’t worry if it can’t work.

    I want a magazine layout…so when you come to each Page (section), you get the latest post featured showing a few lines with image (left aligned) and preferably slightly bigger image than the boxed teaser thumbnails of previous posts below it…please, please PLEASE how do I do this??? Much thanks.

  30. Hi Rebecca
    OK, do you mean you want a ‘teaser’ size image in the latest featured post as well as the post image? I’m a little confused by what you mean when you refer to your featured teaser because Thesis talks about featured posts and teasers as separate things. Got a page reference for the kind of look you want?

  31. Hi Paul, sorry this has taken so long to get back to you – no idea how I missed your query. If you’ve not already got a fix for this, get back to me with a few more details – unclear what you’re after.

  32. Hi Kate,
    Thanks for a great post. It’s helped me a lot with images. I only have one thing left and I think it’s the same as Paul was asking. I want to put a link around the post image so that when the image is clicked, it goes somewhere. I thought there used to be a field for this in Thesis but I don’t see it now. And I could be dreaming.
    Thanks for your help,
    Kamala

  33. Hi Kamala, I’m not sure that you can do that within Thesis’ post and thumbnail image panes. At least, I haven’t tried it. Why not try simply inserting the usual html code within a post for hotlinking to a particular site as well as the img src located on your server. You know the drill!

  34. Hi Dave, not sure how to do this. When I want a caption on an image that isn’t inserted via the WP ‘Insert into Post’ route, I simply add it below the image in the post box. Annoying to have to do this additionally, but it works.

  35. Hi Kate,
    I just installed Thesis a couple of days ago to my test blog site. I’m totally new to WP and trying to figure this all out.

    My question is, all of my current posts are those which I have ported over from by blog on Blogger. Because of how blogger worked all of my images are sitting in photobucket and flickr.

    They all need to be resized and I don’t know how to accomplish this. I resized one manually but it’s still spilling over etc. The rest of my posts don’t even show up when you click on their links. I get a 404.error

    I’m learning how to design my theme but being new to this I’m not sure how to insert images through Thesis quickly and effectively. You can check out my test blog where I’m playing around with all this and see my current layout and problems.

    Appreciate any and all help at this point.

    Tara

  36. Hi Tara. Thanks for your note. First things first – your best friend as a Thesis user is the Thesis Theme User’s Guide. I go there first when I’m stuck on anything. After that I go to the forums where there are always helpful folks to assist and in pretty quick time too, I’ve found over the years.

    OK, as far as sizing images is concerned, what you need to do is ensure that the resized images will fit within the size constraints of your page layout. You can check this in your dashboard under Thesis/Design Options/Site Layout. You may have chosen (say) a three-column format and the images you’ve resized are larger than the dimensions you’ve specified. When you’ve got the dimensions sorted just ensure they are slightly smaller or a lot smaller (depending on the look you want). Just FYI one of my blogs has a 750px wide content column, so I use a default 520px image because it has the look I want. As to resizing tools, I’m a Mac user so I go with Preview (built in) every time. If you are a PC user I am sure there are good free tools out there. Just Google and go for it. And good luck! All the best with your blogging.

    PS Not sure I can advise on what’s happening with the 404 error you are getting.

Comments are closed.