Working with WordPress’ media library and images can be at once and pleasure and a pain. I tend to like the manner in which images are managed in the admin; however, I have been left wanting when it comes to using images in the frontend of site. In particular, I have experienced difficulties displaying images at a specific size in posts or pages. While one can use CSS or the
img tag attributes
width to display the precise image size, it is far more efficient to create an image of the exact size to display. Austin Matzko’s excellent Custom Image Sizes plugin helps ease this process by extending the functionality of the some of the main image display functions in WordPress.
By default, WordPress creates up to four images when an image is uploaded, which include:
- thumbnail (150 x 150)
- medium (proportionally sized; 300 x 300 max)
- large (proportionally sized; 640 x 640 max)
- full (original image size)
To display the image using one of these sizes, you can use either
wp_get_attachment_image_src(). For instance, you can display the thumbnail sized image:
<?php echo wp_get_attachment_image($attachment_id, 'thumbnail'); ?>
Or, perhaps, you can display the large size using the following:
<?php $attachment = wp_get_attachment_image_src($attachment_id, 'large'); ?> <img src="<?php echo $attachment; ?>" />
These two built in WordPress image functions are quite simple to use. The first argument takes the id of the attachment. The second argument takes the size of the image to display. As demonstrated, this argument can be the name of the image size. Additionally, an array defining the height and width of the image can also be sent to these functions as the second argument; however, this is where things can become frustrating. In order to display an image of a precise size (e.g., 225 x 125) to fit a pixel perfect design, one might think to do the following:
<?php echo wp_get_attachment_image($attachment_id, array(225,125)); ?>
Unfortunately, this function will not display an image 225 pixels high and 125 pixels wide. It will instead display the default image size that most closely matches the size specified by the array. In this situation, the thumbnail image would most likely be shown. You can, of course use the
add_image_size function to create the size of the image you want. This is a built in WordPress function for exactly this reason; however, I would rather use the image functions in the intuitive way that I showed above. Enter the Custom Image Sizes plugin–it does exactly that.
Once you install and activate the Custom Image Sizes plugin, the
wp_get_attachment_image_src() functions will behave as one would expect, with only a slight alteration to the second argument in the functions. With Custom Image Sizes, you can display the specific image size by simply calling the following function with the altered second argument.
<?php echo wp_get_attachment_image($attachment_id, '225x125'); ?>
With this code, the following will happen:
- A new image of the specified size will be created if an image of the specified size does not exist
- The image will be cropped if necessary with cropping preserving the center of the image
- The function will return what the original WordPress function returned
Thanks to the Custom Image Sizes plugin, utilizing images from the media library is simple and intuitive, making it one of my favorite WordPress utility plugins.