Easy thumbnails for The Unstandard (or any theme)

timthumb script support

One of the most requested features by The Unstandard WordPress theme users was a easier method for photo thumbnails on front pages. After exploring a few options including using the baked in WordPress media image re-sizer, Raul’s code snippet to be added to functions.php, and various plugins and scripts, I decided to go the route of Darren Hoyt’s timthumb script for a official theme update.

Old method vs. updated method

Prior to the update, cropping and uploading two versions of a photo was required in order to prevent skewed or distorted images. For every post published, two photos were needed: 1 x large hero and 1 x smaller alternative.

For some, the flexibility of being able to specify two unique assets worked. That is why I have not changed that aspect of the theme. What is different is that cropping images prior to uploading is no longer necessary. Cropping, thumbnail creation, and caching is now handled by the timthumb.php script.

Users can still specify two unique images – one for the hero (if the post is the newest on the front page), and a second for older posts. Alternatively, users can upload one image 600px wide or greater then copy ‘n paste the same URI for the file in both custom fields.

Visit the download page for info or edit your existing theme manually using the instructions below.

Adding timthumb.php support manually

Folder heirarchyFirst, visit Darren Hoyt’s site to grab a copy of timthumb.php. Next, visit your theme directory using a (s)FTP client and create a new folder called ‘scripts’. Within that, create another directory and name it ‘cache’. Check to make sure that both newly created folders are set to CHMOD 777 (so that timthumb can write to those folders).

If you’re using The Unstandard, open index.php and look for the following code:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php echo $img_src; ?>" /></a>

Replace that with this new snippet which integrates the newly added timthumb script:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if ( is_first_post($post->ID) ) { ?>
	<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img_src; ?>&w=593&h=225&zc=1" width="593" height="225" />
<?php } else { ?>
	<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img_src; ?>&w=293&h=150&zc=1" width="293" height="150" />
<?php } ?>
</a>

What changed? The modified code for The Unstandard users does one of two things:

  1. If the post is calling the larger hero image, use timthumb to create a thumbnail using the value set for ‘lead_image’.
  2. If the post is not the latest, use timthumb to create a thumbnail using the value set for ‘secondary_image’.

The script accepts a couple different parameters including height, width, zoom crop, and quality. Find out more here.

Caveats relying on timthumb

The only issue using timthumb to automatically create thumbnails is that image files must be hosted on your own site. Images hosted externally will not be thumbnailed and cached.

Note that if you plan on using the same image URI for both ‘lead_image’ and ‘secondary_image’, it is better to cover your bases and upload a image equal to or greater than 600px to account for zooming / resizing.

Discuss - 28 Comments

  1. Mirco says:

    I like the idea, but the generated images are up to four times the size of my original lead_image, although I set q=20 (which doesn’t change the files size much compared to 75).

    Wouldn’t it be easier to include a different function just to resize and crop the lead_image to make it fit into the secondary_image slot?

    • Derek says:

      What is easier was making use of a great script written and polished by Darren Hoyt. I can understand that timthumb may not be for everyone, but I have used it in a few different projects and liked the results. There are pros and cons to any proposed solution.

      So yes, I could have included a snippet of code in functions.php – something like what Raul had recommended in a comment.

  2. Lolly says:

    Shame because it’s a nice theme but I really don’t understand how to create thumbnails for each post…

    • Derek says:

      What is your issue with thumbnails? Upload the images (following the directions on the download page), and timthumb takes care of the rest.

  3. Sam_D says:

    under the IE6 in your site

  4. David says:

    I have my wordpress on a subdomain, and I find that that I cannot have the WordPress address (in the panel settings) as my website domain name…it HAS to be the primary domain name with the folder in which the subdomain is installed to in order to get the thumbnail feature to work at all.

    Example:
    Primary domain is website.com,
    Subdomain is subdomain.com , installed to website.com/subdomain folder

    In order for thumbnails to work I have to put website.com/subdomain as the blog address and website address…but it sucks cause now the subdomain’s domain name is not being used.

    Any suggestions on how to work around this…

  5. doug says:

    I feel completely stupid, but I have to ask this because I can’t seem to find this information anywhere, including the unstandard pages or the timthumb documentation.
    – I’m using unstandard 1.2.1 with all of the timthumb functionality built in. I have not customized any of it.
    – I have uploaded the image and it’s sitting in my uploads folder.
    – I have the full URL for the image associated as the value for both the lead_image and secondary_image custom fields.
    – The images show up as broken images (red x’s in IE, blue boxes in Safari, and just blank in Firefox) on the home page. Nothing shows up on the single post page, not even a big black box.
    – I changed the default media folder to IMAGES in case that was the issue, but that didn’t work.
    – I changed the information as David did above since I am working in a subfolder of a subdomain (for testing purposes because I can’t have my blog down while I figure this stuff out), and I ended up losing access to my test site for about 10 minutes while I scrambled to get a new password created (don’t know why either). The site that the wordpress installation in question is working from is at something like http://website.com/subdomain/test

    Any help would be appreciated. I’m really liking this theme. I just hope I can use it.

  6. Sokun says:

    Very newb question, but I’m having a hard time trying to figure this out with my lack of coding experience.

    How is it that my unstandard index.php file doesn’t have the code that they’re asking me to find?

  7. Shelly says:

    I’m trying to use the theme version that has the timthumb built in. Nothing is working and I’m having the same problems as the people above, starting with doug. Sorry but the instructions here are not helpful with the version of the built-in timthumb. Can you write a version for those of us who are not experienced coders?

    • Patrick says:

      I am having some of the same problems as well. I have started from scratch, installed wordpress v.2.9.1, and installed the most recent Unstandard theme files. My index.php file does not have the script they are asking me to find, I have followed the instructions on the download page, and I still cannot successfully load any thumbnails. The theme looks great and I would love to go further with it, but I am stuck. Thanks for any help anyone can offer.

  8. David says:

    Ok…if your having problems with the Subdomain’s try what I posted above but also when you set the lead_image and secondary_image path in the custom fields of your blog post it dosnt work if you use the subdomain’s domain name…you need to use the host site domain name with the folder path of where the subdomain is installed.

    IE.
    If your host domain is http://www.website.com, and your wp subdomain is installed in the folder subdomain then the lead_image and secondary_image link should be

    http://www.website.com/subdomain/path to image

  9. Shanthony says:

    Is there a way to change the thumbnail size on the unstandard template so it is wider and taller?

  10. Jojo Esposa says:

    I agree that easythumbs is not for everyone. I still prefer cropping both the bigger and smaller images in order to highlight what is important. Just like what I did in our school for the deaf’s official website. I only improved on it’s accessibility features so that it can be accessed by Persons With Disabilities barrier free. :-)

    http://www.mccid.edu.ph

  11. Patrick says:

    Please create a video tutorial for all of use who are lost. That would help so much!

  12. portia says:

    hi. . mine appears as broken thumbnail. . am on the version where timthumbs.php is enabled. .kindly advise. thanks

  13. DC says:

    I just downloaded you latest release of The Unstandard (with built-in TimThumb) and can’t seem to get it to work.

    I created the custom_field and set the value to the URL of my images (/wp-content/uploads/2010/03/picture_here.jpg) but all I see is a black image placeholder.

    Need some assistance or step-by-step tutorial.

    Thanks!

  14. Trazz says:

    Help – I love the theme but cant get the thumbs to show up. When I click into the post everything is there, but the front page is black where the thumbs should be.

    anyone encountered this problem before can lend any assistance?

    thanks.

  15. ethan says:

    The wp theme looks wonderful. However I am experiencing the same problems as above. I am using WP 2.9.2 if that helps understand why I am having problems…

  16. misskah says:

    I’m having the same problem as Doug, will someone pls help.

    • Derek says:

      I’m going to be updating the theme to make use of WP thumbnailing which should alleviate any issues users are having with images.

  17. anna says:

    Is there a way to change thumbnail size? For example, I’d like them to be squares…

  18. Matt says:

    I’m also having problems. The image from the post (which works fine) do not appear om the front page (am I only supposed to have the image in the upload folder or do i need another one somewhere else for the thumbs to work?)

    I also don’t have the code from the instructions,, this is the only one that begins that way is:

    <a href="” rel=”bookmark” title=””>

    I have no code experience im afraid,

  19. nick_ says:

    Hey Derek, awesome plug. I want to know how to define the number of thumbs to show. Someone can help?.

    Thx in advance.

  20. asta says:

    I love this theme but i can’t find the code that i should replace wit the timthumb script.
    I’m getting crazyyy.
    I’m using the unstandard 2.0.1. theme.
    Please can somebody help me?

    this is my index.php

    <div class="main-column grid-8 search-page front-page back-page”>

    Results for ”

    Posts filed as ”

    <div id="post-” class=”ID) ) ? ‘primary-post grid-8 alpha omega thumb-post’ : ‘secondary-post grid-4 alpha omega thumb-post'; ?>”>

    <a href="” rel=”bookmark” title=””>

    ID) ) { ?>

    ID) ) { ?>