Many of us know that having to upload multiple images to accommodate your theme is redundant and time consuming. That is why WordPress is built with an automatic resizing function for all uploaded images to your media library. The question is: how do you insert them into your custom theme without having to use multiple custom fields. And imagine how time consuming it is having to re-enter the photo urls in the custom fields?
The following will show you how with a little PHP, and a single custom field will enable you to use different image sizes inside your theme:
STEP 1: Inside WP admin panel, set up your default image sizes
Note that the thumbnail size doesn’t have to keep the proportions of your original image. Worpress does a good job of cropping the thumbnail as well as focusing in the right area.
STEP 2: Upload an image
Notice how WordPress automatically generates the sizes according to the values you specified in the Media Settings. Keep note of the naming convention – We’re going to need this when we write our code.
STEP 3: Create a custom field – insert the Full size Photo URL as value
This is the only custom field you will need for the post. We will call the other files from this string – since WP simply concatenates the file dimensions in the document name.
STEP 4: Add the PHP in your Theme
We’re going to add new variables manually into that single value in the custom field. We will achieve this through the str_replace function in PHP. We’re looking for the .jpg extension and replace theme with the appended string that WP uses for the resized images:
From here on – you can call the variables we’ve set up to insert the different image sizes in our theme: