• X

    How to Automatically Show Thumbnail Images to Post Excerpts in Thesis WordPress Theme

    By in Uncategorized

    Bluehost hosting

    How to Automatically Show Thumbnail Images to Post Excerpts in Thesis WordPress Theme

    We have already talked about Thesis theme a lot and no wonder it’s one of the best WordPress theme at this moment. If you have missed it, you can read review of Thesis 1.7 WordPress theme. If you looking to customize your Thesis theme you should read 15 thesis theme customization tips.

    In my previous post, How to show Thumbnail on Homepage in Thesis WordPress Theme, I explained about adding a thumbnail image on the homepage for increasing the CTR for your blog. In the last tutorial, we were using the custom field method, which had a bit of manual work.

    It becomes very easy for bloggers to add Thumbnails on Homepage Posts automatically, in the Thesis Theme. It gets handy by using a plugin called “Thumbnails for Excerpts”. It basically fetches the very first image of the post and enables thumbnail image in teaser box for every excerpt post, without editing any post in the WordPress Dashboard.

    image thumb12

    Below is a tutorial to automatically add a thumbnail on homepage in Thesis Theme, WordPress Blog. We will be using a Plugin called Thumbnail for Excerpts, which works well with the Thesis Theme, without any conflicts.

    Tutorial to add Thumbnails in Thesis Theme, WordPress goes under:

    1) Install Thumbnails for Excerpt Plugin

    • Login to Dashboard admin of the Blog or Website.
    • On the left Navigation Pane, under Plugin click “Add New”.

    image thumb13

    • Search for the Plugin name “Thumbnail For Excerpts”, and click install to download and setup plugin on your blog.
    • Now activate the installed plugin to finish Plugin Installation.

    2) Configure Thumbnails for Excerpt Plugin

    • Login to the Dashboard, on left Navigation Pane, select Thumbs Excerpts under Settings Menu Item.
    • Configure the basic settings for the thumbnail layout like Image Width, Height, and Default Image etc…

    image thumb14

    • Hit save changes button to update the configuration for the Thumbnails.

    3) Styling Teaser Thumbnail Image

    • Login to Dashboard Admin, on left Navigation pane, select Custom File Editor under Thesis Menu Item.

    image thumb15

    • Add the below code snippet in custom.css file at the end.

    Make sure you backup the Custom.css file using FTP before modifying it. So, that you can easily revert back, when in uncertainty happens.

         1: /* Teaser Thumbnail Image Styling */

         2: /******************************************************************/

         3:

         4: .custom .teaser img {

         5: /* Add Frame to the thumbnail Image, use "border:none;" to disable border. */

         6: border:5px solid #F2F2F2;

         7: /* Specify the height of the Thumbnail Image*/

         8: height:120px;

         9: /* Adds margin space to the thumbnail Image. */

        10: margin:2px 10px 0 0;

        11: /* Specify the width of the Thumbnail Image. */

        12: width:120px;

        13: }

        14:

        15: /******************************************************************/

      Make sure you insert the code very precisely, else it may crash the layout or break down your website.

    • Now save the custom.css file, and we are done with the styling of Thumbnail on the Home Page of the WordPress blog using Thesis Theme.

    4) Resolve two Thumbnail Image Bug

    On your homepage, if there are two thumbnails appearing, as like in this screenshot below:

    image thumb16 Well, it states that you are using both the methods or procedure for generating the Thumbnail on Homepage. In order to resolve this issue, either disable the “Thumbnail for Excerpt” Plugin or simply delete the custom field using the post editor in the Dashboard Admin. It will remove the either of the Thumbnails.

    This ends our tutorial to add Thumbnail on Homepage, automatically. For any queries or any Thesis Theme help, post comments as your feedbacks. You can also check out our Thesis Theme customization service for giving a new shape to your thesis theme.

    $49 worth WordPress Guide

    Discover more awesome articles

    Article by

    Akshay has written 4 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 17 comments… read them below or add one }

    Jack

    Quite predictably, the plugin does not work. As far as I know, there is no possible way to show images on the Thesis Recent Entries module. I have tried about 25 different ways to get an image to show up on a Post. If the code for Thesis Recent Entries could have been located it, I would have just hacked it deservingly to pieces.

    Reply

    aditya trivedi

    i have this plugin for a month and i didnt feel the need to resolve or add any line to custom.php, #fail

    Reply

    Raj

    Hi…..Akshay nice tutorial but by adding that code in custom.css will also make changes in author avatar with post title in thesis teasers means it will change the height, width, border of author avatar so add this code instead of that

    /* Teaser Thumbnail Image Styling */
    .custom .teaser img { margin:2px 10px 0 0; border:2px solid #C9C9C9;
    }

    Reply

    techdistinct

    thank you Akshay for sharing..

    Reply

    Techfudge

    Just the article I was looking for!
    Thanks Akshay.

    Reply

    Pritam @ Home based Jobs

    Your blog is great. I was checking each and every option in thesis to show thumbnail images in the excerpts but all the efforts gone wasted.
    I was just typing in google “how to show images in excerpts in thesis” and thinking your blog will come in the first place and it really.
    Thanks for sharing this. I learnt most of the thesis customization from your blog.
    Pritam Nagrale

    Reply

    Joe

    Thanks for the helpful tip. I’m not familiar with writing codes, I noticed on your plug in info page you wrote if the text appears to close to the image you can write “some rules for thumbnail images.”

    I just want to add a little space around my image, any codes that you can share with info about where to exactly put them?

    Thanks for your help…

    Reply

    Ron | Travel Bangladesh

    Good post joe.

    Is there any way if I want to use both?

    For example, I want to use in a way that
    if there was a manual thumbnail set for a post, it will use the manual one
    otherwise, it will automatically create a thumbnail and use it

    If I use the plugin, will I be able to use post thumbnail somewhere else? I mean does it create and save the thumbnail, which will be accesible using the_post_thumbnail() later?

    Reply

    Sohail

    I tried your tutorial and it worked on my blog but i want to add (or change) border color of thumbnails. Tried to edit ‘#F2F2F2′ bit in line 6 of the code that you provided in step 3 but it is not working.
    may i know how can i do this plz
    thanks

    Reply

    iPad App Developer

    Cool. But wish to do this without a plugin.

    Also where can we see this feature? On the home page or after a blog post?

    Reply

    Scott Lenhart

    Thanks for the post. Thumbnail for excerpts was looking terrible until I found this.

    Reply

    hilongos

    Is is available to all templates? or just thesis? Does it have any tweak so that it can be applied to a non-thesis theme?

    Reply

    jai prakash

    Thumbnail make a beauty of post as well as awareness of post….Great tutorial for making thumbnail..

    Reply

    Mukundan Srinivasan

    A very explanatory post on inserting thumbnails. I have a blog with thesis theme and this tutorial helped me to insert thumbnail images. You have well presented the post. Nice work.

    Reply

    Umraz

    wow! nice tutorial dude, i heard about this plugin first time, TFS!!

    Reply

    Shivendu Madhava

    I have done this for one of my client without using any plugin.

    Reply

    Anubhab

    Would be very helpful for others and me if you could kindly let know how you did it.

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `