Custom Image Sizes in WordPress Media Popup

Custom Image Sizes in Worpdress © Adobe Stock #197251026

Depending on your WordPress theme you may need different sized pictures and therefore custom image sizes. Often you’ll end up needing more than the sizes provided by WordPress itself. This helps you to ensure you always insert the image is the smallest required size and therefore improve the loading time for your visitors.

Custom Image Sizes in Worpdress © Adobe Stock #197251026
Custom Image Sizes in Worpdress

Custom Image Sizes & WordPress 5.x

Until Worpdress 5.x you could simply add custom image sizes by using a plugin like Simple Image Sizes. However, while you may still create new image sizes and regenerate your thumbnails using this plugin. It’s main purpose, allowing you to add those image sizes to your media dialog seems to be broken in version 3.2.0 since WordPress 5.x. Therefore you’ll need another way to

Adding Custom Image Sizes to your Template

While developing your own template all you only need to define those additional custom image sizes in the functions.php of your Worpdress template, and use them in your template as follows.

functions.php

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'custom-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
    add_image_size( 'homepage-slider', 1920, 1080, true ); //(cropped)
}

In your template you can then simply integrate those pictures like this:

<?php echo get_the_post_thumbnail($post->ID, 'custom-thumb'); ?>

Adding Image Sizes to Media Dialog

Now if you are no developer but still need custom image sizes, you’ll need to add another part of code to your functions.php in order to add those sizes to your media dialog.

function my_image_sizes($sizes) {
    $addsizes = array(
        "custom-thumb" => __( "Custom Thumbnail"),
        "homepage-slider" => __( "Slider")
    );
    $newsizes = array_merge($sizes, $addsizes);
    return $newsizes;
}

Now those custom image sizes will be additionally available for all images you’ll upload in the future. In order to also create those new sizes of all existing images you’ll need to install a plugin like Regenerate Thumbnails to manually generate the missing versions of your images.

Let me know if this worked for you or if you have any questions in the comments below. If this post solved your problem and saved yourself some time please consider showing your gratitude by leaving a small donation at our TipeeeStream account, or visit our Support-Us page, this will help us pay for the ongoing hosting expenses and allow us to create further content.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.