1 post
  • Has been part of the Envato Community for over 6 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more

Yo fellow foresters,

The technique of showing a feature or lead image in those ‘magazine’ style themes is pretty cool huh?

( you know like Net Tuts )

Getting clients or users to fiddle around with image paths and custom fields isn’t so cool.

So I was happy when I found this function called catch_that_image which scans the post and grabs the first image that is in it. You can then use something like the amazing Tim Thumb script to resize, crop and display them.

This was great. But what if my post had an external/remote image that couldn’t be cropped, or just had a video and no image? Or I wanted to show a specific image? or not image at all?

Well, I fiddled with the catch_that_image function to create grab_that_image, a slight variation with more options.

So, to sum it up.

- You need Tim Thumb up and running - A custom field called first_img, which you set to say ‘none’ if you don’t want an image to show - upload a default image to use as a fall back to /wp-content/uploads/default.jpg

I am not a code genius, so someone may see a better way to do things but I have tried to make it understandable and easy to implement on your own sites – feel free to suggest improvements or tell me why it’s total rubbish :) (go easy though)

Here it is: http://pastie.org/630269

So in your loop you can insert grab_that_image() wherever you want the result to appear… which in some cases will be nothing :)

I hope you find it useful – I dunno, maybe someone has already done this but better somewhere else, bu this offers enough options to cover you for all evetulaities and is easy for users/clients to use.

See ya

Paul Burgess

352 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 50+ members
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
+6 more

Nice work :)

I created my own similar function a few weeks ago for a WordPress back-end framework I plan on releasing shortly.

You call it inside the loop with post_image(120, 150); (120 being a width, 150 being height).

The function will first check for an image link provided in a custom field named “image”, if it finds one, it uses that.

If it doesn’t find an image in the custom field, it will retrieve the first attached image from the post – UNLESS the current page is a single post page, at which point nothing will be displayed (you don’t want duplicate images in a post, after all).

Then, if the image it has recieved is on the same server as WordPress, the image will be processed by TimThumb and spat back out.
If it is a remote image, TimThumb is bypassed (since it can’t process remote images), and the image is resized using HTML .

Finally, if you don’t want a post image to display at all, you can set the “image” custom field to “none” and nothing will be displayed :)

Heres the post image code

P.S. Don’t mean to step on anyone’s toes, your code is great :D

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes