Famous Bloggers

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

Auto Generate Thumbnails In 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?)


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:

If 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

2) The Post Image field is empty

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

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


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!

Exit mobile version