Register and display different image sizes in your WordPress theme without using plugins

If you want to use different image sizes in your WordPress theme, you can use a plugin or you could embed the code into core file yourself. Although you will have to deal with some code if you decide to go with this technique, you will be sure there are no extra plugins which might cry for attention and you will implement exactly what you need.

If you still don’t want to deal with the code, you can do the same thing through a plugin.

Before you can start registering new image sizes which you can use all along your theme, you will have to add support for featured images (if your theme doesn’t have it already).

When you’re sure that your theme is ready for featured images (post thumbnails), you can continue with registering new image sizes and choosing how those images will be cropped. Before we show you the code, let’s quickly go through all crop methods:

  1. Soft Proportional Crop Mode: This is the default cropping mode which means you won’t have to use any additional parameters. Once you set desired post thumbnail width and height, this mode will cut the image in such a way that it keeps its proportions. That usually means it will crop the image to fit the width you have set in the code while the height will adjust automatically so the image doesn’t lose its aspect ratio.
    add_image_size( 'image-size-name', 300, 220 );
  2. Hard Crop Mode: If you choose this method, your images will be cropped to exact size you have defined in the code. For example, if you want your post thumbnail to be 100×100 pixels, this crop mode will cut the image to that size without taking care of the rest. That means you will lose part of the picture because only 100×100 pixels (or whatever you set in the code) will be chosen. Still, you can edit the thumbnail before posting an image and choose the exact fraction which will be included in the cropped version. If you don’t set the thumbnail by yourself, default is being used which means a center of the image will be cropped out.
    add_image_size( 'image-size-name', 100, 100, true );
  3. Hard Crop with defining crop position: If you don’t want to use the center of every cropped image or to choose part of the thumbnail, you can define the crop position in the code itself. Maybe you want all of your thumbnails to look the same so you can for example always use top left part of an image.
    add_image_size( 'image-size-name, 220, 220, array( 'left', 'top' ) );

Now that you have defined custom image sizes, you have to use them in your theme. There are many different ways of using those images. In the next few lines, we’re about to show you only two of them.

Use custom size as a featured image anywhere in your theme:

if ( has_post_thumbnail() ) {
the_post_thumbnail( 'your-custom-size' );
}

Media Library: Adds your custom image size to a list of images sizes in media library.

add_filter( ‘image_size_names_choose’, ‘my_custom_sizes’ );
function my_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
‘image-size-name’ => __( ‘Choose a name for your image size’ ),) );
}

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *