How To Add A Thumbnail Image to Thesis Teasers

In: WordPress


how to add thumbnails to thesis teasers

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.

Weekly WordPress Tips To Your Inbox
+ Get 50% Off The Beginner's Guide to SEO Ebook!

Lucy Beer - WebTrainingWheels WordPress TrainingDo you need a personal WordPress teacher to help you learn what you need to know without wasting time? I provide customized WordPress tutoring in-person or remotely via phone/screensharing.


35 Responses to How To Add A Thumbnail Image to Thesis Teasers

Avatar

Grateful for Grace

June 9th, 2010 at 2:06 am

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!

Avatar

LucyBeer

June 17th, 2010 at 2:22 pm

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.

Avatar

Jason

July 29th, 2010 at 9:39 am

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

Avatar

LucyBeer

July 30th, 2010 at 4:29 am

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

Avatar

Jason

July 30th, 2010 at 4:00 am

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

Avatar

Michelle

August 3rd, 2010 at 2:24 am

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?

Avatar

LucyBeer

August 3rd, 2010 at 7:16 pm

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.

Avatar

Stefany @ ToBeThode

August 4th, 2010 at 10:40 pm

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!

Avatar

LucyBeer

August 5th, 2010 at 6:08 am

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!

Avatar

Stefany @ ToBeThode

August 4th, 2010 at 11:45 pm

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!

Avatar

Michelle

August 5th, 2010 at 2:09 am

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?

Avatar

LucyBeer

August 5th, 2010 at 7:35 am

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

Avatar

LucyBeer

August 5th, 2010 at 2:41 pm

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.

Avatar

LucyBeer

August 5th, 2010 at 2:45 pm

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.

Avatar

Stefany @ ToBeThode

August 5th, 2010 at 9:34 am

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. :)

Avatar

Michelle

August 5th, 2010 at 7:37 pm

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?

Avatar

LucyBeer

August 6th, 2010 at 3:12 am

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?

Avatar

mynotetakingnerd

August 9th, 2010 at 4:37 am

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

Avatar

asep

August 10th, 2010 at 1:30 am

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

Avatar

tur

August 11th, 2010 at 6:30 pm

i am having this same issue

Avatar

Dimitri

August 12th, 2010 at 3:09 pm

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!

Avatar

Becky

September 17th, 2010 at 6:41 am

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

Avatar

LucyBeer

September 17th, 2010 at 7:09 am

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

Avatar

brijux

September 19th, 2010 at 9:21 pm

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.

Avatar

Nasif

September 20th, 2010 at 9:59 am

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

Avatar

LucyBeer

September 20th, 2010 at 11:02 am

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!

Avatar

rajkanuri

September 23rd, 2011 at 9:30 am

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

Avatar

Andre

November 28th, 2011 at 3:48 pm

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.

Avatar

LucyBeer

November 29th, 2011 at 9:20 am

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

Avatar

Mytechshout

January 28th, 2012 at 11:00 pm

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

Avatar

Lucy

January 31st, 2012 at 10:39 am

thanks!

Avatar

Working on Excerpts, Thumbnails and Teasers | Word Grrls

February 13th, 2012 at 4:17 am

[...] also found Web Training Wheels which finally helped me understand what I needed to do to use thumbnails on Thesis. Even though I [...]

Avatar

Wedding Photographer Sydney

March 28th, 2012 at 1:37 am

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???

Avatar

Graphic Designer

June 20th, 2012 at 9:31 am

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

Avatar

LucyBeer

June 20th, 2012 at 9:51 am

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: [email protected]

Comment Form

Weekly WordPress Tips

+ Get 50% Off The Beginner's Guide To SEO Ebook!

How I Can Help You

Hi! I'm Lucy Beer. I know that WordPress is liberating when you know how to use it, and bewildering when you don’t. I help individuals and businesses learn WordPress for their specific needs. I will accelerate your knowledge and cut your learning curve in half (at least!). Generic tutorials and videos only go so far - when you need specialized knowledge, or a real person to answer your questions, that's where I come in. I help non-techies understand and use the web to empower their personal or business mission.

Learn How To Get Targeted Traffic To Your Site >> $20

Socialize

Services I Use & Recommend

Siteground Hosting
Sucuri
WP Engine
Gravity Forms
  • LE Johns: Just out of curiosity, do real people ever register as subscribers on a blog via this registration p [...]
  • Dorothy at Shockingly Delicious: I just updated WP and I really miss not being able to highlight text with a background color. I didn [...]
  • BluePromoCode: Thanks for the article with the code. I have been looking for this and always ended up getting confu [...]
  • LucyBeer: Thanks and you're welcome! I need to update it a little to talk about some of the new details i [...]
  • LucyBeer: Sounds like you'll need something like the "Members" plugin by Justin Tadlock [...]