How to add additional image sizes in WordPress

This is a quick tips for WordPress developers or WordPress website owners. In this tutorial i will explain how to add additional image sizes in WordPress. When you are uploading the images from admin, WordPress will crop your images in tree sizes which is:
Thumbnail size ( Width: 150 and Height: 150 )
Medium size ( Max Width: 300 and Max Height: 300 )
Large size ( Max Width: 1024 and Max Height: 1024 )

default-media-image-sizes

Additional wordpress image resize function

If you want to add some additional image sizes rather than the default image sized, then use the below code in functions.php file of your current activated theme.

< ?php 

//add additional image sizes
if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
    add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)
}
?>

< ?php

//add additional image sizes

if ( function_exists( 'add_image_size' ) ) {

add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)

add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)

}

The image size won’t show up in your media settings screen, but it will automatically cropped during image upload. You can call that image sizes by using post thumbnail like:

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

< ?php

echo get_the_post_thumbnail($post->ID, 'product-thumb');

How to show custom image sizes in admin media uploader

Want to show custom image sizes in your admin media upload option, then open functions.php file of your current theme and copy paste below code.

< ?php
function show_image_sizes( $sizes ) {
    $new_sizes = array();
    $added_sizes = get_intermediate_image_sizes();
    
    // $added_sizes is an indexed array, therefore need to convert it
    // to associative array, using $value for $key and $value
    foreach( $added_sizes as $key => $value) {
        $new_sizes[$value] = $value;
    }
    
    // This preserves the labels in $sizes, and merges the two arrays
    $new_sizes = array_merge( $new_sizes, $sizes );
    
    return $new_sizes;
}
add_filter('image_size_names_choose', 'show_image_sizes', 11, 1);

?>

< ?php

function show_image_sizes( $sizes ) {

$new_sizes = array();

$added_sizes = get_intermediate_image_sizes();

// $added_sizes is an indexed array, therefore need to convert it

// to associative array, using $value for $key and $value

foreach( $added_sizes as $key => $value) {

$new_sizes[$value] = $value;

}

// This preserves the labels in $sizes, and merges the two arrays

$new_sizes = array_merge( $new_sizes, $sizes );

return $new_sizes;

}

add_filter('image_size_names_choose', 'show_image_sizes', 11, 1);

If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.

How to add additional image sizes in WordPress

Additional wordpress image resize function

How to show custom image sizes in admin media uploader

Recommended Posts:

webmentor