Image sizes in WordPress

A user asked me a few days ago how to get the image width and height of a custom-defined image size in WordPress. After searching through the WordPress source code, I couldn’t find a function that handled this. I suppose there really aren’t too many uses for it, but this user needed these values for a custom script, which at least intrigued me enough to write out a custom function to handle this.

In this tutorial, I’ll walk you through adding custom image sizes as well as getting these image sizes within your custom scripts.

This is not a complete tutorial on how images work in WordPress. I’ve previously written a tutorial on WordPress’ post image feature on my personal blog, but I didn’t delve into the details of adding custom sizes. I still highly recommend reading that tutorial if you want to look at few cool image features or learn more about how images work in WordPress.

How to create custom image sizes

I’m sure many of you are aware of how to add custom image sizes and use them, so please feel free to skip this section. I wanted to briefly cover this so that users new to adding image sizes can get the full picture.

WordPress comes pre-packaged with the thumbnail, medium, and large image sizes. When you upload an image using the WordPress media uploader, the image is resized and/or cropped to fit the proportions you’ve set under your media settings. Theme and plugin developers can also add custom sizes to accompany the built-in sizes.

To add a custom image size, you would use the add_image_size() function as shown in the following line of code.

add_image_size( $name, $width, $height, $crop );

The add_image_size() function takes in four parameters:

  • $name: Your unique name for this image size.
  • $width: The width (in pixels) for images of this size. The default is 0.
  • $height: The height (in pixels) for images of this size. The default is 0.
  • $crop: Whether to crop images of this size to the exact dimensions. The default is false.

Let’s suppose you wanted to add a custom image size called my-feature that was 600px by 200px and always cropped to the specific dimensions given. You would add the following code to your theme’s functions file or plugin file.

add_action( 'init', 'my_register_image_sizes' );

function my_register_image_sizes() {

	add_image_size( 'my-feature', 600, 200, true );
}

Getting the values of a custom image size

In the previous section of this tutorial, you learned how to add a custom image size. There may be a time when you need to get the width, height, or crop values of this custom image size. Since WordPress doesn’t have a function for this, I’ve written one for you.

You can use the following function in your theme and plugin projects.

function my_get_image_size( $name ) {
	global $_wp_additional_image_sizes;

	if ( isset( $_wp_additional_image_sizes[$name] ) )
		return $_wp_additional_image_sizes[$name];

	return false;
}

It’s a simple function and takes in a single parameter of $name. Remember that custom image size you created in the previous section of this tutorial? my-feature would be the name of the image size you added. To get its values, you simply need to plug that name into the function.

$image_size = my_get_image_size( 'my-feature' );

The return value of the function will be an array of the values you initially set when using the add_image_size() function:

array(
	'width' => 600,
	'height' => 200,
	'crop' => true
);

Suppose you needed to uses these values in a function called my_example_image_function() for whatever reason. Your function might look a little something like the following code.

function my_example_image_function() {

	$image_size = my_get_image_size( 'my-feature' );

	if ( !empty( $image_size ) ) {

		$width = $image_size['width'];

		$height = $image_size['height'];

		$crop = $image_size['crop'];
	}
}

As you can probably tell, I don’t really have any practical applications for this functionality. It’s just a cool little script that a user asked for that I thought I’d share. It’s up to you to figure out if you can make some use of it in your plugins or themes.

Getting WordPress image size values

The above functionality deals with custom image sizes. In most cases, your plugin or theme would already know these values because it’s setting them itself. However, plugins and themes don’t have control over the WordPress-packaged image sizes by default. These values are something that users set under their Media Settings screen in the admin.

The default WordPress images sizes are easy to retrieve. You just need a call to get_option() with the correct option name. Suppose you wanted to get the width of the thumbnail size the user has input. You’d use the following code.

$thumbnail_width = get_option( 'thumbnail_size_w' );

The available options are:

  • thumbnail_crop: Whether to crop the thumbnail to exact dimensions.
  • thumbnail_size_h: The height of the thumbnail.
  • thumbnail_size_w: The width of the thumbnail.
  • medium_size_h: The medium size height.
  • medium_size_w: The medium size width.
  • large_size_h: The large size height.
  • large_size_w: The large size width.

Don’t worry about extra database queries with this either. These options are auto-loaded on each page view, so you won’t run into issues in that area.

How can you use this?

As I’ve mentioned, I don’t have any projects or ideas where I want to use the get image size values functionality, at least not yet anyway. So, I thought I’d ask if you, our readers, have any ideas of where this could come in handy.

Comments on all posts are currently closed. This is a temporary spam measure. Sorry for any inconvenience.

css.php