How To Add A Thumbnail Image to Thesis Teasers

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Teasers are nice default feature of the Thesis WordPress theme. However, to take them to the next level there are a couple of nice n’ easy customizations you can make to move beyond the default look. This post will discuss thumbnail images. A future post will address changing the width and styling of the teasers.

The addition of an image to the teaser is a really simple way to give your Thesis design an extra boost. This is especially great for creative sites that use wonderful imagery – food blogs, arts n crafty blogs, art/design blogs etc.

Assuming you also typically use a header image at the very top of your post (similar to the way posts on this blog look), the easiest way to achieve this by default is to use Thesis image fields to handle the main image for your post, from which it will also auto-create the teaser thumbnail.

Set up the default options
Thesis Image OptionsIn the Thesis options menu, go to the Design Options submenu, then Post Images and Thumbnails. The Default Post Image Settings control where the main image for your post will be positioned. I personally prefer ‘before post/page content’ so that it shows up under the headline of the post, immediately before the text of the post. You can play with the options to see how it changes the look.

The Default Thumbnail Settings relate to how the thumbnail will be displayed in the teaser. I prefer “Left with text wrap” but again, play with it and see what suits you.

Thesis thumbnail settings

All of these settings can be overridden on a post by post basis if necessary.
Don’t forget the big ass save button.

Implement in a post
When you are writing your post and you want to add an image to the top of the post, you click on upload image as normal. The difference happens when you would ordinarily click ‘insert into post’. Instead, you now copy the url of your image and hit save instead.

thesis upload image
Now scroll down the post editing page past several fields until you reach “Post Image and Thumbnail”. In the field labeled “post image” – paste the url of your image, then enter the alt text in the field below.

Thesis - insert image url

Now save your post and that’s it. Your image will automatically appear at the top of your post AND in the teaser as a thumbnail.
The other fields will inherit the information you set in the default Thesis menu as above. If you want to override the defaults, this is where you would do that, but generally speaking you won’t need to touch these.
You can play with the placement and border options to change the look.

Playing with Thesis Thumbnails

Thesis - frame around teaser thumbnail
This process will give you the same teaser thumbnail as main header image. If you want a different thumbnail – you’ll have to upload a separate image to your media library, grab the image url and paste it into the Thumbnail image field on your post. Note that if you specify an image url here Thesis will not resize it, so you will have to upload the exact size image you want to display.

Other images you want to include in the body of your post can be uploaded and inserted in the usual manner – this method relates to a main header image for your post only.

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Weekly WordPress Tips To Your Inbox

+ Get 50% Off The Beginner's Guide to SEO Ebook!
  • This field is for validation purposes and should be left unchanged.

This Post Has 37 Comments

  1. Sana

    I cannot retrieve the featured image of this template : http://toscanaproperty.dk/sager/barga-39/

    Please help me find the hookname.
    I have done a inspect element to the cached version of code. couldnt get the hook there.

    Please help me.

    1. Lucy

      You’ll have to look in the theme code for that. Or if it’s Thesis, look in their support docs.

  2. Graphic Designer

    Thanks for the easy step by step tutorial. In all my searches to get an image in my teasers, I keep getting the same answer, only I cannot get the image to show up. And I cannot figure out why. I have tried over and over, Starting new posts and trying again, but I cannot get it to work. Please help me. I really need to figure this out. You can check out the site I am working with at http://thoughtleadershipblog.com
    I have asked several other people for help and no one is getting back to me, so your help is greatly appreciated!

    ~Jessica

    1. LucyBeer

      Well people probably aren\’t getting back to you because it\’s impossible to troubleshoot by just looking at your site. I would have to see what you\’re doing on the backend – you probably don\’t have your settings configured correctly. If you\’d like to email me directly I may be able to help: lucy@webtrainingwheels.com

  3. Wedding Photographer Sydney

    Hey great post! It took me ages to find a good one like yours. All the rest of the solutions out there were suggesting to go into the php editor etc. but I knew there had to be an easier way.

    Only thing is that the image is not resizing (automatically). When I click the +more info button, it says the image must be resized prior to inserting.

    So are you able to have yours resized automatically? Hmm???

  4. Pingback: Working on Excerpts, Thumbnails and Teasers | Word Grrls

  5. Mytechshout

    Nice thesis tutorial.I have added it to my thesis blog.

    1. Lucy

      thanks!

  6. Andre

    Hi, My name is Andre.

    Need your help here.
    I want to put my post title on the right site of the thumbnail image. Here the example http://www.credit.com/blog/

    Please help me.

    Thank you very much.
    note: if you don't mind, please send me the answer to my email.

    1. LucyBeer

      Hi Andre
      It would help if you could include a link to the blog in question.
      Thanks

  7. rajkanuri

    I got a strange problem.. When I update my site.. I am getting double thumbnails in the home page… what should I do??

  8. Nasif

    That's the best tutorial ever ! Thanks a lot Lucy :D But I am using images from Picasa, will it work ?

    1. LucyBeer

      Thanks Nasif. Personally, I haven't tested it using images hosted elsewhere. I THINK I'm right in saying that the automatic thumbnail resizing won't work unless the original image is hosted on your site. However, if you manually created the sizes you need for the main image and the thumbnail and hosted them on Picasa, you could still paste in those urls and they should show up. Let me know what happens!

  9. Becky

    I need to know how to put a thumbnail pic into my featured teaser at the top of each page. Below the feature post which only shows a few lines taking up full column width, I have 4 teaser boxes and I've easily been able to get thumbnails into these teasers – just don't understand why I can't get the same thumbnail to show up left aligned for the feature post at the top of my content column? This is driving me nuts looking around for help as no-one seems to be able to help out. Would greatly appreciate your help. Thanks

    1. LucyBeer

      It would be helpful if you can provide a link – hard to troubleshoot without actually seeing it…

      1. brijux

        I have the same issue at my blog http://brijux.com

        I did everything that is mentioned in this post. I have also googled it and tried everything I could. Tried giving separate image for thumbnail and what not. But thumbails won't show up in the teasers.

        You can check it on http://brijux.com

        (I don't have image for every post, but I did put image in http://brijux.com/2010/08/17/richard-dawkins-rebu… post, the thumbnail should have been showed up on home page.

  10. mynotetakingnerd

    I recently imported my blog and I can't for the life of me get
    the thumbnails to show up.

    I've done everything here yet nothing show up.

    Thank you

    1. asep

      Me to, i've follow the steps, but can't create thumbnail just show the original image

    2. tur

      i am having this same issue

    3. Dimitri

      I have the same problem! I have moved my blog to a new host with all the previous settings, but teaser thumbnails won't show up anymore!

  11. Stefany @ ToBeThode

    Color me confused… but what if I want to have a larger image for the post and the thumbnail for the teaser? Do I do the same process? I am so used to "insert into post" that I am not sure what happens if I don't do that.

    Thanks much!

    1. LucyBeer

      Hey Stefany
      Instead of clicking "insert into post" you need to grab the url for the main image you want in your post, and paste that info the "Post Image" field. Thesis then places that image in the post at its full size AND resizes it into a thumbnail to display in the teaser. Try it out and see!

      1. Stefany @ ToBeThode

        Thanks Lucy… still have a question… if you don't mind.

        Can you not hyperlink images by doing this?

        I so appreciate all of this. My blog is looking better thanks to your tutorials!

        1. LucyBeer

          Hm, that's a good question. I couldn't find a way to make that happen using any of the default settings. You might have to add your own custom field where you could enter the hyperlink. But that would involve getting into some code….

        2. LucyBeer

          UPDATE -Well actually, there's a long way to do this if you really need that image to be hyperlinked. You would have to manually create your desired thumbnail image at the size you need it to be, then upload that and paste the image location into the "thumbnail image" field. This is what would show up in the teaser. Then you could upload and insert into post in the normal fashion, another version of that image which you could then hyperlink.

          1. Stefany @ ToBeThode

            This is what I did last night to mess with it. I used "insert into post" to create the image in the post that I need hyperlinked. Then went into the code and grabbed the url and added that into the thumbnail field. As long as the image wasn't too huge, it worked fine… otherwise I had to change the default sizes.

            Basically what you said but I was lazy and just stole the same image code from when I inserted into post first.

            Thanks sooo much Lucy! I think this looks so much better on my homepage and now I can do it fairly easy. I subscribed to your weekly updates because you have been a huge help and I want to keep up. :)

  12. Michelle

    Hi Lucy.

    This has been so helpful thanks!
    I just have a query…I've added my picture..but it's way to big.
    Should thesis automatically resize it? or should I upload smaller picture?

    1. LucyBeer

      Hi Michelle. Make sure you are pasting the url for your image into box titled "Post Image" NOT into the Thumbnail Image field. By pasting it into the Post image field, Thesis will then automatically resize it into a thumbnail.
      If that does not resolve the issue, check the dimensions you specified for the Thumbnail image size under Default Thumbnail Settings which is in the Design Options menu in Thesis.
      Let me know if that helps.

      1. Michelle

        Hi Lucy.
        Thanks so much for the response- that really helped!

        I have another question now though, is there a way so the picture doesn't show up once post is clicked?

        1. LucyBeer

          Ah. So you want a thumbnail image in the teaser but not in the actual post? In that case, you would have to upload an image at the actual size you want the teaser thumbnail to be, and paste that into the Thumbnail Image field. If you use the Thumbnail Image field, Thesis won't resize it for you. In this case you would not use the Post Image field.

          1. Michelle

            Hi Lucy.
            I un clicked 'Show images on single entry pages' (which is under > design options > Post Images and Thumbnails>Default Post Image Settings) and that seemed to do the trick.

            I put an image in the post image field, but thesis didn't resize it for me?

          2. LucyBeer

            Hm…I'm afraid this is hard for me to troubleshoot without actually logging into your site and seeing the settings. Was it resizing the image previously? Or has that never worked for you?

  13. Jason

    Thanks for the reply =) Have not seen a site with multiple thumbnails yet…I thought it might be handy as I run a photo blog..

  14. Jason

    Hi, would you know how to add more than 1 thumbnail into the teaser? I can't figure out how to do that! =(

    1. LucyBeer

      Actually I'm not sure how to do that! Is there a site you've seen that has multiple thumbnails?

  15. Grateful for Grace

    Ok, I'm really, really new to WP and Thesis. Am in the process of transferring my Blogger blog to WP. Putting the final touches on my layout.
    I have two Qs. One is pretty important:
    I don't know what you (and everyone else) means when they say the photos' sURL. I upload my photo from my computer. How does it get an URL??
    Can I do anything about all the posts with photos imported from Blogger?

    Right now my teasers don't show *any* photos at all. Just text.

    TIA!

    1. LucyBeer

      Hi there.
      Every photo or file you upload has a location, or url – the place where it lives on the server.
      If you go into your Media Library and click Edit for any image, you will see the File URL listed.
      As long as your old posts are in your WordPress dashboard you can treat them the same way as any other. You may need to resize images so the old photos are an appropriate size that fits your new blog but if you follow the steps in this post, your teasers will have thumbnails.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">