Ready to learn how to register custom image sizes in WordPress and use SRCSET functionality in Oxygen for fully responsive images?

In this tutorial you’ll learn:

• The difference between „responsive images“ (width scales effectively without causing overflow issues) and „responsive SRCSET images“ (loading multiple image sizes so the browser can choose the best size.
• The old non-SRCSET way to add images to Oxygen and why it’s less desirable.
• How to register custom image sizes in WordPress for use in Oxygen.
• How many custom image sizes you should be registering and exactly what those sizes are.
• How to insert SRCSET responsive images easily using the Oxygen builder.
• How to regenerate existing images so all their sizes are available in the Oxygen builder.

Step 1: Install Code Snippets Plugin

Oxygen doesn’t have a functions.php file, so we’ll need to add a plugin to add this code. The Code Snippets plugin is free and easy to use and keeps your code snippets nice and organized.

Step 2: Register Custom Image Sizes

Once you have the Code Snippets plugin installed, you’ll want to create a new snippet and paste the following code in the code box:

add_theme_support( 'post-thumbnails' );
add_image_size( 'image-480', 480, 9999 );
add_image_size( 'image-640', 640, 9999 );
add_image_size( 'image-720', 720, 9999 );
add_image_size( 'image-960', 960, 9999 );
add_image_size( 'image-1168', 1168, 9999 );
add_image_size( 'image-1440', 1440, 9999 );
add_image_size( 'image-1920', 1920, 9999 );

This will add support for each of those defined image sizes.

Außerdem muß folgendenes ins Snippet dazu, um im Builder auf die verschiedenen Bildgrößen zugreifen zu können:

function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'image-480' => 'image-480',
		'image-640' => 'image-640',
		'image-720' => 'image-720',
		'image-960' => 'image-960',
		'image-1168' => 'image-1168',
		'image-1440' => 'image-1440',
		'image-1920' => 'image-1920',
	) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

In all fairness, I don’t know why that 2nd code snippet is required. IMO, Gutenberg should be able to see and show those added image sizes by default like Oxygen does. It’s possible that code won’t be required at some point in the future, idk. I’m not a programmer.

Step 3: Install Regenerate Thumbnails Advanced

Any images that were uploaded to the media gallery prior to following this tutorial will not support the new custom image sizes until they’re re-generated. For this, you’ll want to use the Regenerate Thumbnails Advanced plugin by the team at ShortPixel.

Step 4: Regenerate Thumbnails

Navigate to Tools > Regenerate Thumbnails and you’ll see this panel:

As shown in the screenshot, make sure you choose all the new custom image sizes to regenerate and then click the „regenerate“ button in the bottom left.

Once the images regenerate, they’ll be available for use in the Oxygen Builder.