46Reactions
Auto Generate Thumbnails In Thesis Theme

Auto Generate Thumbnails from the First Image in Content – Thesis Theme

If you are a Thesis Theme user, then I assume you already know that Thesis has two ways to generate or display images on your blog, the post thumbnails and post image. Once you upload and image using the WordPress media uploader, and add the image URL to the post thumbnails/image field, Thesis will crop and resize your image and display it.

If you are starting a new blog, probably you won’t have a problem as your blog still brand new, it has no content yet, so you can start writing your posts and add images to them. But what if your blog has already posts, and you decided to move to Thesis Theme on it?

Once you install Thesis Theme, You will discover the problem!

You will discover that post thumbs and post images is not showing, because You haven’t tell Thesis which image to use, so basically there no way to display images as thumbs Without editing all your posts and use the thumb/image field. This can be really painful, some times it’s impossible.

Finding the Auto Thumbnail Solution

I have been thinking how to solve this issue, especially that many of my thesis skins users has already established blogs, and need an easy way to display thumbnail images without having to suffer.

Some WordPress themes has the ability to grab the first image from the content automatically and set that image as a thumb for that particular post, but Thesis Theme dose not have this feature, so what if we added this feature to it? (it would be awesome…right?)

Allright!

One feature that BlogSkin‘s users asked for is adding a feature to generate auto thumbnails without having to use the Thesis Post Image -as a time saver- especially for those who have live blogs since some time with a couple of 100 posts, they are required to edit all their old posts to add images using the Thesis Image Post field, this is how the BlogSkin know about your images and display them allover the blog.

I know understand that this is not an easy task, especially if you have more than 10 posts on the blog, it will require a ridiculous amount of work and time to set images manually. I can not imagine myself doing it because I am sure I will get dizzy after a few minutes :)

While Thesis Theme doesn’t support auto thumb, I am trying to figure out a way to make that possible in the BlogSkin, I already know that many bloggers are having problems updating their old blog posts, and I know they need this feature, so I am going to kick that one and solve the problem.

The most popular way to auto generate thumbnails images for posts is to grab the first image in the post, and set that image to be the thumbnail for that particular post.

Alright, that sounds good, but there is another challenge to think of, what if there are some posts with no images?

The best solution -I think- is to set a default image. Create a nice looking image that has your logo for example, then you can use this image as your default thumbnail image.

But how I will grab the first image in content?

This is not a problem at all, there is a lot of tutorials that explains it well, but there is a trick here, I am between using the TimThumb PHP Script, or stick with Thesis Theme thumb script.

I had to investigate this matter, especially after TimThumb PHP Script exploited, all WordPress community was and still talking about this problem, and many people gave solutions that doesn’t seem to be perfect. However, the script was recorded again according to Mark Maunder and Ben Gillbanks, and there is an awesome new version TimThumb 2.0 now that is safe to use!

Mark said: I’m going to be working with Ben going forward to continue to have TimThumb be the easiest to use, fastest, most popular and most secure thumbnail script on the Web. source: TimThumb 2.0.

From the other side -DiyThemes.com side- many Thesis Theme user received emails from Hostgator and BlueHost asking them to update their theme or version of TimThumb, which leaded to a confusion for some people. I am telling you this because I got the email from BlueHost where I have more than one WordPress installation, they never mentioned Thesis Theme at all, they only mentioned one domain name I have ElegantThemes installed on it, this was the only WordPress setup that has TimThumb script in it.

Thesis Theme and TimThumb

So, If you are asking yourself, should I upgrade my Thesis Theme and update it to the recent release of TimThumb?

The answer is simply: NO! Don’t touch the core of Thesis Theme, never!

Here is why (my source is Thesis Theme support forum):

Because Thesis uses its own modified version of TimThumb, you cannot simply replace the contents in thumb.php with the latest version of the TimThumb code, because it will not work.

Now! You may know my concerns about including TimThumb into the BlogSkin, I don’t think I will do that, not because the security issues, but I don’t see a need to use an external script while there is a modified and secured version comes with Thesis itself.

For now, let the Thesis Theme developer decide by himself whither to update the thumb script in Thesis 2.0 or not!

So, back to topic. Let’s think how the BlogSkin will act after the new modification I will make, how the BlogSkin will generate thumbnails images based on the first image in the content.

How you think the code will respond to that considering all possibilities?

I will have to create a new function that grabs the first image from the post, then call that function when I need it. Here is how I imagine the option page:

Auto thumb generation option page Thesis ThemeIf you notice the screenshot above, you will see what’s coming in the BlogSkin options page, there is a new sub section for Post Image that controls the whole thing, with these 4 choices, the BlogSkin users will determine what images to use and where it will appear on the blog.

[box type=”note”]Notice that the skin has it’s own custom teaser function for the home page, so one of the most wanted features is actually to control the display of thumbnails on teasers.[/box]

Here is the scenario of display thumb images:

[box type=”red”]1) There is an image defined in the Post Image field

    • Action: Display that image as a thumb.

2) The Post Image field is empty

    • Action: Try to locate the first image on the post and display it as a thumb.

3) Post Image field is empty and no image in the post body

    • Action: This is insane, but not a problem, display the default image.

4) Post Image field is empty, no image in the post body, and no default image assigned

    • Action: Do nothing, (I don’t know how to draw or take photos… This is crazy – :)

[/box]

When to expect this update?

I need this to be done this week because I have many other stuff to work on, so I am going to be really busy getting the next BlogSkin update out, and like always, I need your help, I can not make things happen without you!

I need your opinion and feedback about this matter, even if you don’t actually use any of my thesis skins, if you have a better scenario than the above, please share it!

I create websites with WordPress, and I develop Thesis Skins. I am a social network lover. I am also the night creature who works hard to keep this project up. Owner and founder of the Famous Blog.

GET FREE EMAIL UPDATES

Get our latest articles delivered to your email inbox, plus download our FREE 15 minutes later marketing guide.

We respect your privacy!

{ 20 comments… add one }

  • Toufiq October 13, 2012, 3:09 pm

    What is the method to get the auto thumb in previous post?

  • Rohit August 16, 2012, 9:10 pm

    Thanks, Very helpful post… But I’m looking how to add wordpress 3.0 featured image feature to thesis theme. Now I will use the solution you described here.
    Rohit recently posted..Use of WordPress Shortlink and SEO ImportanceMy Profile

  • Vitor December 4, 2011, 2:13 pm

    So,where is the code?

    • Hesham Zebida December 4, 2011, 2:44 pm

      The code will be added to the BlogSkin over at ThesisAwesome.com for the members, so it won’t be shared here on the blog.

  • Noel Addison October 10, 2011, 1:40 am

    Thanks for bringing up the problems that a blogger might encounter in using Thesis Theme and for providing the solution for the problem.

  • Nik September 27, 2011, 1:48 am

    Why not just incorporate serges code that already generates thumbnails from images within posts ?

    http://creersitepro.com/2011/thumbnail-catcher-pro-for-thesis-theme-wordpress/

    • Hesham September 27, 2011, 2:12 am

      Hi Nick,

      Thanks for the link, the plugin looks good, maybe someone will be interested in using it, however I need to code this by myself in the BlogSkin, actually it’s almost done, so I won’t be using any plugins!

      • serge October 1, 2011, 5:06 am

        Hi Hesham,

        if you are interested in the code – mail me ( you have all contact info on my website or in DIYtheme forums user : sergeliatko ) thus i give you php block to use in your skin.
        serge recently posted..How to Embed RSS Feed into WordPress PageMy Profile

        • Hesham October 9, 2011, 1:51 am

          Hi Serge,

          I really really appreciate your kind offer, I am actually done with the code, so probably there is no need!

          Thanks again, and I hope this will turn to a good relationship!

    • serge October 1, 2011, 5:13 am

      Thanks Nick,

      but for the future thesis/wp development I will integrate post thumbnail (already done in my wp featured image for thesis plugin) with this thumbnail catcher and custom killer entries widget into one same plugin. So final thesis users will have no headache with thesis featured images and thumbnails. as here http://beckyjoy.com .

      As of now, when I start a site on thesis – i install the three plugs by default. BTW the plugs code came out of my custom_functions.php , so anyone saying plugins are not good – check the code first ;)
      serge recently posted..How to Embed RSS Feed into WordPress PageMy Profile

  • Salah Messaoud September 26, 2011, 3:14 pm

    As I see all loves Thesis Theme as I read it is SEO friendly too.I might give it a try, I have seen
    many professional bloggers using it
    Salah Messaoud recently posted..7 Tips How to Build a Splendid Web FormMy Profile

  • Kavya Hari September 26, 2011, 7:32 am

    From here, i gathered a lot of information about Auto Generate thumbnail from first image information on here. It will be looking too good in it.
    Kavya Hari recently posted..Amazing News For Webmasters!My Profile

  • Ileane September 25, 2011, 7:53 am

    Hesham, first let me get to my response – #2 Action: Try to locate the first image on the post and display it as a thumb.
    Now my question is this – how will the image be resized to fit and what are the dimensions?
    Next – I’m really happy that you’re working on this, I’m not surprised to be among the list of bloggers in need of this.
    Last – I agree that #3 is insane and #4 is crazy :)
    Ileane recently posted..Fundamentals of Video Marketing: YouTube [Part 2]My Profile

    • Hesham September 25, 2011, 8:23 pm

      Hey Ileane,

      I will resize the image exactly the way Thesis do it, using it’s own thumbnail script, and give it the same CSS classes to look exactly like other images on teaser.

      Image size will be set to 140×140 (same as teaser images size we use on the BlogSkin). This size is quite small, so I have no doubts that the first images on any blog will be smaller than that.

      So, basically you don’t need to do any extra steps, just take the right decision and tick the right check box in the options page.

      I hope this makes sense.

      Yeah, haha maybe next update we can take picture right from the user’s computer :)

  • Ahmad Wali September 25, 2011, 7:41 am

    I think this will be the crucial update. As, it is too dumb that thesis default thumb script cannot pick the first image on the post. I remember moving my blog from other theme to Thesis and I had about 30 plus posts! All the thumbs were gone and It was a headache to post thumb image on each post. However, I left the posts as it is and moved on, but If someone go back those old posts look too ugly without thumb image.

    I am glad you mentioned this issue in this post. I had recently hired a developer for my car reviews blog and he actually fixed this issue by adding featured image option, which automatically show thumbnail and featured image or the default first image if featured is not set.

    I would go for second scenario because it will be easy to display thumb images across your blog when you move to thesis theme. It will save the headache of adding the post image thumb individually on Thesis. I will wait for the update on this one, thanks.
    Ahmad Wali recently posted..Things To Remember Before Publishing The Next Blog PostMy Profile

    • Hesham September 25, 2011, 8:09 pm

      Thanks Ahmed, I hope to get this done before the end of the week!

      I really appreciate your input.

  • Rahul Chowdhury September 25, 2011, 7:19 am

    The Thesis Theme is really great, it offers so much to any designer. And Thanks for the Tip man, that was really helpful!

  • James September 25, 2011, 1:52 am

    I have been scratching my head on this issue for some time now. I was planning on switching themes and this has been a major issue with some of the new premium themes I have tried and I noticed the same thing while testing your new theme.

    So your plans to fix this issue is great and I can’t wait to see your final results!

    • Hesham September 25, 2011, 8:01 pm

      Hi James,

      I will do my best to get this to work soon!

Leave a Comment

CommentLuv badge