rss

Using custom fields to create archive thumbnails

16 Apr, 2008 Styling

Image by <a href=When I launched this site, I was instantly jumped on by Ruark asking me how I achieved the thumbnails on the home & archive pages of this site. This can be done in a number of simple ways and with a bit of imagination, you can take it to a much greater level. So use this article to understand the basics and then you can decide how best to implement these methods.

You’ll need…

Achieving this thumbnail effect requires a custom field, some CSS, and ideally a screen capturing program. The custom field will capture the URL of the thumbnail image, the CSS will be used to define the exact space the thumbnail will occupy and the screen capturing program will grab the thumbnail itself.

1) Make the thumbnail

Personally, I absolutely love FastStone Capture. The full version will cost you all of $19.95 but I promise you its a purchase that’ll save you bucket loads of time. With it, you can select a marquee area of your screen and it’ll automatically save that selection as a JPG/GIF/PNG image. Of course you can use the normal print-screen feature, crop it in PhotoShop and then save it, but FastStone will do all that for you.

2) Upload it

So once you have your thumbnail image, upload it into WP. In 2.5, the ‘Add Media’ feature will upload the image and then present you with the URL to that image.

Copy the URL and then close the upload dialog. Dont insert the image or anything.

3) Save your custom field

Then create a new custom field called ‘thumb’ (or whatever you like) and copy the URL of that thumbnail image as the value of that key.

At this point, you can save your WP post and open up your code editor of choice…

4) Add the code

Open your index.php or archive.php file, find the loop and insert something like this before the_content() is called:

<div><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></div>

The wrapping div around that image is there so we can CSS the thumbnail as necessary.

Note that you can also make the image a link to your article like this:

<div><a href= "<? the_permalink(); ?>" title="<? the_title(); ?>"><img src="<? echo get_post_meta($post->ID, 'thumb', true) ?>" /></a></div>

This makes simple use of the loop variables to insert the article URL and title tag of the link.

5) CSS it as necessary

Lets say that you’d like your image to be exactly 100px X 100px at all times and you’d like to float it left so the text wraps up around it to the right. Your CSS would then look like this:

.thumb {
 width:100px;
 height:100px;
 border:5px solid #efefef;
 float:left;
}

NOTE: naturally you’d want the image that you capture to be more than 100×100 so that there’s no whitespace in that div…

6) Enjoy

And thats that… Hopefully that explains it adequately Ruark?

Of course you can tailor where in your loop the thumbnail will display and how large etc it is with your CSS.

39 Comments

  1. Thanks man! Going to give this a test this evo. legend!

  2. I just saw your post on Web Log Tools Collection. Thank you! I’ve been trying to figure this out for a few days now.

  3. Great! Glad you were able to find this then :) Thanks gestroud.

  4. Hey WP Guru, we need more of you around to help us all out with our endless little tutorial needs. Thanks for this cool tut. One thing I hate about wordpress and custom field images though is that I haven’t found a great way to automatically upload and resize the images on the fly, like a plugin or something. I know there are some dynamic upload plugins, but none that work without installing complicated php graphic libraries or something, Any advice?

  5. So you’d like a system whereby you could upload an image and have it automatically thumbnailed to a certain size?

    Well WP 2.5 has the ability to set the size at which your thumbnails are created. The bonus of WordPress 2.5 is that you have 2 thumbnail sizes available to you – small & medium.

    What I’d suggest then, is keep one of those sizes for the thumbnail size that you’d like to use in your theme. Then in your admin settings, set the size that you’d like that thumbnail to be. Now when you upload an image, you can use that particular thumbnail thats now the exact size you require.

    Make sense? :)

  6. Very Good!
    Another question. Is possible to insert thumbs of one directly post for email?
    Thanks!

  7. @bkpgeral: i’m not sure i understand your question?

  8. Ok. I need to post-by-mail with my mobile, but inserting a url of the thumbnail for each post. It´s possible??
    (excuse my bad english)

  9. Ok i understand… I’m not sure about that – haven’t tried it myself. If you can access the custom fields via your mobile, then you shouldn’t have a problem, otherwise I don’t think it’ll be possible…

  10. wow!! i have been searching for gallery plugins to do this for me for FIVE DAYS NOW… i woke up this morning and realized i was going to have to customize EACH POST somehow and i googled and two minutes later i was on your page with the solution!!!! it only took me 15 or 16 hours to modify each post tho haha… sometimes i wonder why i love wordpress so much!! anyway, thank you and i’ve spread your link around lol, thank you thank you!!!

  11. hi, well now you don’t have to make and upload thumbnails coz wordpress does it for you, but i’m wondering how to control the number of thumbnails an archive page shows, because right now it’s the same as the number of posts the page shows, and since it’s a photoblog i would like to limit my posts showing, maybe even to ONE, but then i would only have one thumbnail showing on each page of my archives… suggestions? thanks!!

  12. What is I want to put a custom field for a link that is different from the post page? Would it be

    <a href= “ID, ‘link’, true) ?>” title=”"><img src=”ID, ‘thumb’, true) ?>” />

  13. I guess I can’t post code…. sorry.

  14. Another way of achieving this is given at globinch.com . Read How to Create WordPress Thumbnail Based Post Archives
    http://www.globinch.com/2010/11/01/how-to-create-wordpress-thumbnail-based-post-archives/

  15. very good post, i certainly love this website, keep on it

  16. Oh my goodness! Impressive article dude! Many thanks, However I
    am going through problems with your RSS. I don’t understand why I can’t
    join it. Is there anybody getting the same RSS problems?
    Anybody who knows the answer can you kindly respond?
    Thanx!!

  17. You can have a provisional patent which allows you to be the sole owner of a certain
    invention for a short period of time. In
    case of patent services, an inventors notebook can have immense importance.
    This would also give a way for certain modifications that you would want to create.

  18. Hi my friend! I want to say that this post is awesome, nice written and include approximately all
    significant infos. I’d like to peer extra posts like this .

  19. Hi Janie here, I like your site.

  20. I was suggested this blog by my cousin. I’m not sure whether this put up is written through him as no one
    else know such specified approximately my trouble. You’re incredible!
    Thanks!

  21. I’m not sure why but this website is loading extremely
    slow for me. Is anyone else having this problem or is it
    a problem on my end? I’ll check back later and see
    if the problem still exists.

  22. This design is steller! You obviously know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job.

    I really enjoyed what you had to say, and more than that,
    how you presented it. Too cool!

  23. Thank you for the good writeup. It actually used to be a leisure account it.

    Glance advanced to more added agreeable from you!
    By the way, how could we keep up a correspondence?

  24. Honesty and transparency are paramouint and can be procured from land-based outlets too.
    Among the other companies were: Audi Customer business
    5 forces Relations, Boston Scientific, Capital One Bank and
    Merrill Lynch Retirement Services. The working environment of call center services, just like Bell
    and Rodgers of Canada.

  25. At this time it seems like Movable Type is the preferred blogging platform out there right now.
    (from what I’ve read) Is that what you are using on your
    blog?

  26. I’m amazed, I must say. Rarely do I come across a blog that’s equally educative and entertaining, and without a
    doubt, you’ve hit the nail on the head. The problem is
    an issue that not enough people are speaking intelligently about.
    I’m very happy I came across this during my hunt for something concerning this.

  27. naturally like your website but you have to test the spelling on quite a few of your posts.

    Several of them are rife with spelling issues and I in finding it very bothersome to tell the reality however I will certainly come back again.

  28. There are people who believe that you do not have being married to be in a committed relationship.
    He was given an possibility to cheat minus the fear of getting caught, so he took advantage in the
    situation. Escaping with a hidden location to chat to strangers like
    car, garage, and basement is simply suspicious.

  29. Today I’m going to be doing? Sometimes, tight spandex just isn’t the way
    to bieżnia elektryczna work as hard as they can hurt the body and rest.
    The Scottish airport is backing calls for a third runway and said a fourth
    should also be considered. In order to center on what are
    the promising trends in today’s treatment programming.

  30. They are likewise willing to be forthcoming about their
    whereabouts, feelings, and intentions. Then
    you’ll know if it’s time to find out definitely. This is for
    that people who would like to experience and enjoy playing poker but doesn’t have enough real money for betting.

  31. Hi there this is somewhat of off topic but I was wondering if blogs use
    WYSIWYG editors or if you have to manually code with HTML.

    I’m starting a blog soon but have no coding know-how so I wanted
    to get advice from someone with experience.

    Any help would be greatly appreciated!

  32. These two forms of using the word’roll form’ will be used indistinguishably throughout this manuscript.
    With the garage door closed, place the ladder below the motor and find the limit switches.
    Many home improvement stores carry Wayne Dalton parts and doors so they would have additional
    resources for you.

  33. Despite the very fact that it really is difficult to discover exactly
    why men cheat, namely your man, there are a amount of common reasons.
    This is most likely due to the fact that women tend to be
    emotional than men, so their reasoning will be rooted in emotion.
    Both of these you’ll be able to do at the home with the one
    day fantasy league.

Trackbacks

  1. Ultime dal fronte WordPress 16-2008: Sicurezza ed altro
  2. WordPress Weekly News, 16-2008: security and much more
  3. WordPress Archives that *works*: StepxStep Guide and Plugins
  4. WordPress Archive that *works*: StepxStep Guide and Plugins | POLPDESIGN
  5. Using custom fields to create archive | 深圳林生英语翻译服务

Leave a Reply

About The WordPress Guru

Over the last 4 or 5 years, I’ve been digging into the Wonders of WordPress. From the days when the Classic theme was the shizz until now, WordPress has gone from strength to strength both as the blogging platform of choice for many big players and as a CMS with...

Learn more »