Never miss a post - Subscribe To My RSS Feed and receive updates on new posts related to growing your Internet business!

How to Use TimThumb to Automatically Resize WordPress Post Images Part 4: Adding Image to Post Using Custom Fields

Keller Hawthorne | November 10, 2009 | 4 Comments

WordPress

This post is part 3 of 6 in the series...
How to Use TimThumb to Automatically Resize WordPress Post Images

Step 3: Add Image to Post Using Custom Fields

Ever noticed that “Custom Fields” box on the “Edit Post” page in WordPress? Don’t be scared of that area! The “Custom Fields” box is a powerful and easy way to add special features to posts, such as podcasts and images. If you haven’t touched it yet, let me explain how it works.

WordPress Custom Fields Box

This box allows us to add special data to posts which we can play with later in our theme. As you can see above, I’ve used it to add an image to this post. The image is no longer embedded within the post content, but instead “attached to it” as meta data.

Name Field:

Think of the name field as an ID section for the data you want to insert. You’re simply assigning this data an ID or “Name” with which you can use to identify it later within your theme template pages.

Value Field:

This section is where we insert our data. In this case, I’ve inserted the URL of the image I would like to use in this post. You can see that I store my images in a folder called “images,” however this is not necessary. You could continue to use the WP “Add Image” button or your “Media” section to upload images to your blog and then use the URL WP provides you and insert it into the “Value” field.

How Does TimThumb.php Work with Custom Fields?

When using TimThumb, we add specific PHP code to our WordPress theme that looks for data from the custom fields section of a post. If it finds the data with the “Name” we’ve selected, it will do whatever it is we want it to do with that data.

So, we need to add an image to this post! For this section, I will assume you’re using the built in WordPress image upload-er.

A. Upload Image to WordPress

Go to Posts > Edit
Edit a post you would like to work with for this tutorial or add a new one
While in the “Edit Post” page, click the “Add an Image” button
Under the “From Computer” section, click “Select Files”
Locate the image you would like to upload on your computer and click “Open”
You should now see your image. Click on the button that says “File URL.” WordPress will now display the URL for this image
Highlight and copy the image URL
Click “Save All Changes” and close the box

B. Insert Image Into Custom Fields

We need to add our image to the Custom Fields box. First, we need to assign this data a “Name.” This same name will be used on every post we want TimThumb to resize images for.