Site logo

Archived topic

Custom Image Sizes

12 replies · Started by Laura on June 2, 2022

Viewing posts 1–13 of 13

Hi,
I'm trying to create custom images sizes.

I have this in child functions:
// Add custom image sizes //
add_action( 'after_setup_theme', function() {
    add_image_size( 'logo-horiz', 500, 200, true );
    add_image_size( 'logo-vert', 250, 175, true );
} );

I have regenerated thumbnails, see earlier email with issues with that.

No new image sizes show up in the image choices in the post image block. What am I doing wrong?

Also, how would I tell the sizes to be 500 width max? Also I don't want cropping. What does the true represent?

Thanks!

Hi there,

thats because WordPress decided to hard-code the list of sizes in the image select box.
You can add your own sizes using this PHP Snippet:

add_filter( 'image_size_names_choose', function() {
	return [
		'thumbnail'    => __( 'Thumbnail', 'generatepress' ),
		'medium'       => __( 'Medium', 'generatepress' ),
		'medium_large' => __( 'Medium Large', 'generatepress' ),
		'large'        => __( 'Large', 'generatepress' ),
		'full'         => __( 'Full Size', 'generatepress' ),
                'logo-horiz'   => __( 'Full Size', 'generatepress' ),
                'logo-vert'    => __( 'Full Size', 'generatepress' ),
	];
} );

In your code. the true specifies that the image should be cropped. Change it to false if you do not want to crop.
If you want to just set a max width then only set a single value eg.

add_image_size( 'your-image-slug', 500 );

That will create a max 500px wide image of variable height without cropping.

More info here:

https://developer.wordpress.org/reference/functions/add_image_size/

As always, thank you David!
So are you saying leave what I have in the child functions file and add this to Snippets? Both go together? So if I want to add more image sizes, do it in both places?

Thats correct. You need both.
Your snippet to create the new sizes.
My snippet so they appear in the select list.

And "my snippet" should be in child functions not in Snippets?

I also have this one...
add_action( 'init', function() {
add_image_size( 'logo_profiletop', 500, false ); // 500 width max no crop
} );

Should I delete that from functions?

I have it as you said...but I still don't see the new image sizes as an option to choose from...but this is from within WPGeoDirectory but they say it will read any sizes that are available. So I must still be missing something.

I have this in functions:

// Add custom image sizes //
add_action( 'init', function() {
add_image_size( 'logo_profiletop', 500, false ); // 500 width max no crop
} );
add_action( 'after_setup_theme', function() {
add_image_size( 'logo-horiz', 500, false );
add_image_size( 'logo-vert', 250, false );
} );

And this in Snippet:
add_filter( 'image_size_names_choose', function() {
return [
'thumbnail' => __( 'Thumbnail', 'generatepress' ),
'medium' => __( 'Medium', 'generatepress' ),
'medium_large' => __( 'Medium Large', 'generatepress' ),
'large' => __( 'Large', 'generatepress' ),
'full' => __( 'Full Size', 'generatepress' ),
'logo-horiz' => __( 'Full Size', 'generatepress' ),
'logo-vert' => __( 'Full Size', 'generatepress' ),
];
} );

As you're using a Child Theme then i would keep the two PHP codes in the child theme functions.php
That is your add_image_size snippet and the image_size_names_choose i provided.

OK so my snippet tells the Rest API to display them in tbe Image Attachment select box. And this should apply to any plugin that uses the select box in the editor.

However, it will only show them if an Image of that size is available. And thats probably the reason they are not showing.
So after adding a new image size you need to run the Regenerate Thumbnails plugin and WordPress will create the new size images.

It's still not showing the new sizes.
I have this in child functions:
// Add custom image sizes //
add_action( 'init', function() {
add_image_size( 'logo-horiz', 500, false ); // 500 width max no crop
add_image_size( 'logo-vert', 500, false ); // 500 width max no crop
} );
add_action( 'after_setup_theme', function() {
add_image_size( 'logo-horiz', 500, false );
add_image_size( 'logo-vert', 250, false );
} );
add_filter( 'image_size_names_choose', function() {
return [
'thumbnail' => __( 'Thumbnail', 'generatepress' ),
'medium' => __( 'Medium', 'generatepress' ),
'medium_large' => __( 'Medium Large', 'generatepress' ),
'large' => __( 'Large', 'generatepress' ),
'full' => __( 'Full Size', 'generatepress' ),
'logo-horiz' => __( 'Full Size', 'generatepress' ),
'logo-vert' => __( 'Full Size', 'generatepress' ),
];
} );

I have regenerated thumbnails a few times, cleared cache..no dice. Those options don't show up in the list of optional image sizes.

Am I doing something wrong?

Hi Laura,

I tested the code and was able to make the new images sizes appear: https://share.getcloudapp.com/Wnu7AlWd

Can you check if the syntax of your code is correct? For instance, sometimes, copying in pasting makes the quotation marks slanted. They should be straight.

For reference, here’s the code I tested:

add_action( 'after_setup_theme', function() {
add_image_size( 'logo-horiz', 500, false );
add_image_size( 'logo-vert', 250, false );
} );
add_filter( 'image_size_names_choose', function() {
return [
'thumbnail' => __( 'Thumbnail', 'generatepress' ),
'medium' => __( 'Medium', 'generatepress' ),
'medium_large' => __( 'Medium Large', 'generatepress' ),
'large' => __( 'Large', 'generatepress' ),
'full' => __( 'Full Size', 'generatepress' ),
'logo-horiz' => __( 'Full Size Horiz', 'generatepress' ),
'logo-vert' => __( 'Full Size Vert', 'generatepress' ),
];
} );

Hope this helps!

And this would go in child functions, not Snippets, correct?

That worked great! I must have had something wrong in mine.
Thanks so much! Solved :-)

It can be added to either Code Snippets or functions.php if you’re using a Child theme.

You’re welcome Laura! Glad you got it to work! :)

Thank you! :-)

Feel free to reach out anytime you'll need assistance with anything else! :)

This archived topic is closed to new replies.