Provide images in custom sizes

[André]

Hi,

I want to serve images in more appropriate sizes so that the browser needs to scales less. Therefore I checked the needed images sizes throughout my site and ended up with 9 different sizes. Because WordPress already scales images to 3 different sizes I need to add 6 others. So I added via CodeSnippes Plugin the following code (found here in the forum):

add_action(‘after_setup_theme’, ‘tu_add_image_sizes’);
function tu_add_image_sizes() {
	add_image_size( 'size 1', 200, 9999 );
	add_image_size( 'size 2', 400, 9999 );
	add_image_size( 'size 3', 600, 9999 );	
	add_image_size( 'size 4', 800, 9999 );
	add_image_size( 'size 5', 1200, 9999 );
	add_image_size( 'size 6', 1600, 9999 );
}

To test this I uploaded a new image with an original size of 6892 x 3876. The results I am getting are the following images:

• Image.jpg 6892 x 3876 – obviously the original images (expected)
• Image-scaled.jpg 2560 x 1440 – unexpected, don’t know what has caused this size and naming
• Image-150×150.jpg 150 x 150 – expected, because WordPress Standard size
• Image-300×169.jpg 300 x 169 – expected, because WordPress Standard size
• Image-768×432.jpg 768 x 432 – unexpected, don’t know what has caused this size
• Image-1024×576.jpg 1024 x 576 – expected, because WordPress Standard size
• Image-1536×864.jpg 1536 x 864 – unexpected, don’t know what has caused this size
• Image-2048×1152.jpg 2048 x 1152 – unexpected, don’t know what has caused this size

My question is, how can I generate only the images I need, i. e. the three standard ones plus the above six defined sizes? Does GeneratePress create the unexpected measures?

Many thanks!

[David]

Hi there,

GP doesn’t add any additional attachment sizes.
The 2560px size is probably related to this:

https://make.wordpress.org/core/2019/10/09/introducing-handling-of-big-images-in-wordpress-5-3/

Can you link me to your site, so i can take a look at where the other sizes are possibly coming from. Edit your original topic and use the Site URL field to share a link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[André]

Aha, ok, it seems that WordPress generates 2560×1440, 2048×1365, 1536×864, and 768×512 for so-called big files.

See here: https://www.2dogsdesign.com/wordpress-53-image-handling/

I admit I tried a colossal image just for testing. So, WordPress 5.3 Release explains the additional file sizes. But these are not my required sizes. It seems they are ignored. How can I add my desired dimensions (and preferably switch off these standard sizes)?

[Tom]

Hi there,

You can set some sizes in “Settings > Media”.

You can also define your own sizes using add_image_size(): https://developer.wordpress.org/reference/functions/add_image_size/

For disabling them, this article might help: https://perishablepress.com/disable-wordpress-generated-images

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[André]

Hi Tom,

Yes, this is what I did (see above), but it is not working. I tried to add the images sizes via the CodeSnippets Plugin (recommended in the GP docs and working fine for other areas already). Where do I need to put the add_image_size() part? I do not change the functions.php because I don‘t use a child theme.

Thanks!

[Elvin]

Hi André,

Your code seems fine but after adding, the site has to regenerate those image sizes.

You can try to use a plugin to do that for you.
https://wordpress.org/plugins/regenerate-thumbnails/

Alternatively, you can do it via WP-CLI command.
https://developer.wordpress.org/cli/commands/media/regenerate/

Perhaps what you meant was, you are not seeing the image sizes you’ve added on the dropdown list in Gutenberg.

To see the images you have added, you must register the sizes you’ve added with image_size_names_choose filter.

Here’s a sample PHP code that does that. You can change the ‘size 1’ and the values to whatever size you like.

function tu_add_image_sizes() {
add_image_size( 'size 1' , 200, 200 );
add_image_size( 'size 2' , 400, 400 );
add_image_size( 'size 3' , 600, 600 );
add_image_size( 'size 4' , 800, 800 );
add_image_size( 'size 5' , 1000, 1000 );
add_image_size( 'size 6' , 1200, 1200 );
}

add_action( 'after_setup_theme', 'tu_add_image_sizes' );

function add_image_size_to_media($sizes){
$custom_sizes = array(

'size 1' => 'Size 1', 'size 2' => 'Size 2', 'size 3' => 'Size 3', 'size 4' => 'Size 4', 'size 5' => 'Size 5', 'size 6' => 'Size 6'
);
return array_merge( $sizes, $custom_sizes );
}
add_filter('image_size_names_choose', 'add_image_size_to_media');

Let us know if it works for you.

[André]

Hi Elvin,

Thanks. My issue is different. But you pointed me in the right direction. I uploaded new images that should produce the newly defined sizes. Checking with the WP CLI threw a PHP error “use of an undefined function”. I copied and pasted the above snippet from another thread of this forum. During this copy/paste action, the single quote (‘) has changed to (`). The root cause is hard to find because both marks look quite similar, but after I corrected it, everything works as expected.

I close this topic.

[Elvin]

Oh yeah I should’ve mentioned that. When I copied your code I had to correct that.

Good catch. Nice one.:)

[Author]

Posts