Custom image sizes are working beutifully!

Hey there,
I was in the need to use custom image sizes for some backgrounds and found that BB supports custom registered image sizes out of the box, great!
I’m happy and thought to share a code snippet that can come in handy.
Just put the following code in your theme’s functions.php, it will register custom image sizes with sane names to be used on WP image size select boxes.
Just use a dash to separate words for the first add_image_size parameter (that’s the internal identifier) and it will be converted to a space character in your menus.

Cheers!


/*---------------------------------------------*/
/* ADD CUSTOM IMAGE SIZES
/*---------------------------------------------*/

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'video-gallery', 300, 169, true );
	add_image_size( 'full-panoramica', 1920, 650, true );
}

add_filter( 'image_size_names_choose', 'insert_custom_image_sizes' );
function insert_custom_image_sizes( $sizes ) {
	global $_wp_additional_image_sizes;
	if ( empty($_wp_additional_image_sizes) )
		return $sizes;

	foreach ( $_wp_additional_image_sizes as $id => $data ) {
		if ( !isset($sizes[$id]) )
			$sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
	}

	return $sizes;
}

Hey Alessandro,

Thanks for this really useful function. We really appreciate it. :slight_smile:

Ben

Ehilà Ben,
we haven’t presented yet, nice to meet you here!
I’ve started using BB about 1 year ago and used to give an hand on the forum… before your arrival!

BB support has always been stellar, but now from my time zone (Rome, Italy) it’s rare if not impossible to find support requests waiting for a reply, that’s galactic support or what ?!? :wink:

Alessandro

Hey Alessandro,

Nice to meet you here as well! I’m still building up my BB knowledge base so I still miss up on some things but the other guys have been there for me. It’s a great community we have here. :slight_smile:

Ben

Using the above code. I can get this working for posts and pages but in beaver builder for the custom image sizes it says “undefined - 300 x 200”. Wordpress Standard image sizes display correctly. The sizes are correct and Wordpress has correctly sized the images in the media library but Beaver builder doesn’t seem to be registering the names properly. Posts and Pages do show the names correctly.

I’ve verified that it’s not a theme or plugin conflict.

I also tested a similar naming function from Pippin Williamson with similar results.

Any thoughts on why this might be?

Scratch that - seems it was an issue with messing with the sizes to being with - deleting the images from the uploads directory and regenerating the thumbnails with correct size info fixed the problem. :slight_smile:

Hey Brendyn,

Yes, the image sizes need to be regenerated by WP. Instead of deleting the images and re-uploading the files, you can use the plugin Regenerate Thumbnails. :slight_smile:

Ben

I’m glad it worked out!
Yes, images must be regenerated if you add or change size with an already existing library, sorry for not pointing that out from the beginning.

Alessandro

Incase this happens to anyone else - I had already regenerated the image sizes using the regenerate thumbnails plugin but something odd had happened to the file names they still showed the old sizes in the file name not the new pixel dimensions.

Physically deleting them from the uploads folder then regenerating thumbnails fixed it.

Brendyn

Hey Brendyn,

Thanks for the heads up! :slight_smile:

Ben

I’m attempting to use this code in my bb-theme-child and it doesn’t seem to add the new sizes. I’ve added them to the functions.php file in my child theme. Any idea as to what I’m doing wrong?


/*---------------------------------------------*/
/* ADD CUSTOM IMAGE SIZES
/*---------------------------------------------*/

if ( function_exists( 'add_image_size' ) ) {
//Social Image Sizes
	add_image_size( 'twitter-in-stream', 506, 253 );
	add_image_size( 'facebook-link-timeline', 484, 252 );
	add_image_size( 'facebook-link-page', 470, 246 );
	add_image_size( 'facebook-image-timeline', 504, 0 );
	add_image_size( 'facebook-image-page', 470, 470 );
}

add_filter( 'image_size_names_choose', 'insert_custom_image_sizes' );
function insert_custom_image_sizes( $sizes ) {
	global $_wp_additional_image_sizes;
	if ( empty($_wp_additional_image_sizes) )
		return $sizes;

	foreach ( $_wp_additional_image_sizes as $id => $data ) {
		if ( !isset($sizes[$id]) )
			$sizes[$id] = ucfirst( str_replace( '-', ' ', $id ) );
	}

	return $sizes;
}

Hi Jason,
the only line that seems weird is this
add_image_size( 'facebook-image-timeline', 504, 0 );

if you want an image size with a width of 504 and a relatively “unlimited” height you should use
add_image_size( ‘facebook-image-timeline’, 504, 9999 );

then, don’t forget to regenerate the images using a plugin like https://wordpress.org/plugins/regenerate-thumbnails/ and it should work

let me know if you manage to solve the issue

Alessandro