• How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    December 24th, 2010    by Thesis Customization Service

    by Thesis Customization Service on December 24, 2010

    Thesis Theme for wordpress blogs has been outstanding for its SEO, Speed, and styling options. If you are using a lower version of Thesis, then we recommend you to get the latest version of your Thesis Theme or you can also do that yourself, referring to our article on How to Upgrade to Thesis 1.8.

    In this article, we will tell you about, how to automatically show thumbnail on homepage of your blog using thesis theme. Adding a thumbnail with your posts makes your blog page fascinating and more interesting to the readers. It also increases the CTR rate or hits for your blog posts.

    For less manual work for the bloggers, in order to generate a thumbnail, we use a plugin called Thumbnail for Excerpts. It pulls the very first image from your post and resizes the image without any extra work.

    image thumb9 How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    Below is a tutorial to automatically add a thumbnail on homepage in Thesis Theme:

    • Login to WordPress Dashboard admin of your desired Blog and navigate to Plugins > Add New.

    image thumb10 How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    • Search for the Plugin name “Thumbnail for Excerpts” and click to install and activate.
    • Once the plugin is installed and activated, navigate to Dashboard > Settings > Thumbs Excerpts.
    • Configure the basic options for the thumbnail, like Size, Alignment, Default image, etc…

    image thumb11 How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    • Once we are done with the customization, click on the “Save Changes” button down under, to save all the configurations.
    • We are almost done, with the installation of our Thumbnail on homepage. If we want to style our thumbnail image, just to add an effect follow the procedure below.

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

    • In dashboard admin Navigate to Dashboard > Thesis > Custom File Editor.
    • In the custom file editor, by default it edits custom.css file. But if you are unsure, choose custom.css from the drop down and hit edit selected file button.
    • Add the below code snippet in to the custom.css file. (Refer the Screenshot Below)
       1: /* Teaser Thumbnail Image Styling */

       2: .custom .teaser img {

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

       4: border:5px solid #F2F2F2;

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

       6: width:120px;

       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: }

    image thumb12 How to Automatically Generate Thumbnail on Homepage in Thesis Theme ?

    • Revise the code once again so that it doesn’t break the layout and now hit save button. Refresh the homepage to see the effect.

    I hope this tutorial will help you to customize and spice up your Thesis Theme. If you need help with any particular thesis theme customization tutorial, do request one via Contact form.

    Subscribe to receive Free Thesis Customization Tips

    • We will send you latest Thesis Theme customization tips, hacks and tutorials to make most out of Theiss Theme.
    • You will also be receiving latest Thesis theme news, Thesis skins release, Thesis theme upgrade notices.

    9 Comments

    { read them below or add one }

    Siva December 24, 2010 at 12:54 pm

    Does this slow down Homepage ?

    Reply

    Thesis Customization Service December 24, 2010 at 12:56 pm

    Hey Siva
    More images means more loading time.. Though thumbnail on homepage increases CTR.
    So it’s your choice if you wish to compromise with speed for better presentation.

    Reply

    Amandeep Singh December 29, 2010 at 3:50 am

    Hi Harsh,

    I am using the below code on my blog to stylize the thumbnails but the changes are not getting reflected. Can you please help me out?

    /* Teaser Thumbnail Image Styling */
    .custom .teaser img {
    /* Add Frame to the thumbnail Image, use “border:none;” to disable border. */
    border:5px solid #D1D1D1;
    /* Specify the width of the Thumbnail Image. */
    width:150px;
    /* Specify the height of the Thumbnail Image*/
    height:150px;
    /* Adds margin space to the thumbnail Image. */
    margin:2px 10px 0 0;
    }

    Thanks,
    Aman

    Reply

    Rakesh Kumar December 31, 2010 at 5:48 pm

    I totally agree with harsh. but I prefer designing because it catches visitors interest, As i think!

    Reply

    Noel Lyons January 4, 2011 at 1:16 am

    Think like a magazine; choose multi-media wherever you can online in 2011.

    Brilliant – I’vd wanted to know how to do this for sometime!
    Many thanks,
    Noel Lyons

    Reply

    ProSpirity January 7, 2011 at 1:12 am

    Hi

    I must be missing something, isn’t Thesis doing this automatically?
    Thanks

    Reply

    ProMagz January 23, 2011 at 6:16 pm

    Thesis does this automatically using custom fields. In that case you have to copy paste the thumbnail link in the custom field.

    Reply

    arramuse April 9, 2011 at 3:03 pm

    Hi, can you share how custom field instructions ?

    thanks

    Reply

    Laura February 13, 2012 at 6:10 pm

    Thank you for this guide. It works great and I’m really happy with it. Your extra tips for the CSS customization were perfect. But, I did find it better to leave out the size information in the added CSS. If I leave it with WordPress > Media my images are kept proportional rather than being squished to fit exactly the size I gave it.

    I also added an image to the default thumbnail. Is there a way to make this cycle through a few images rather than just one? It doesn’t look like the Thumbnail Excerpt plugin is still being supported by the original developer. The site has a note about being abandoned.

    Reply

    Leave a Comment

    Previous post:

    Next post: