Custom Image Sizes in Oxygen

Oxygen does not have built-in support for automatically making custom image sizes that have been registered using the add_image_size() function available in its editor.

In this members-only tutorial we cover all the possible scenarios for rendering the images in custom/specific image sizes when using Oxygen:

• Static inline (img tag) images - added via the Media Library option
• Dynamic inline (img tag) images - added via Dynamic Data option
• Static background images
• Dynamic background images

Step 1

Register your desired custom image sizes using Code Snippets or a custom functionality plugin.

Ex.:

add_image_size( 'blog_featured', 1920, 1200, true );
add_image_size( 'facebook', 1200, 630, true );

If you would like to resize any already existing images, regenerate thumbnails.

Step 2

Inline images added via the Media Library option

To make applicable custom image sizes appear in the Size dropdown when "Media Library" is selected for an image component, add the following sample code:

add_filter( 'image_size_names_choose', 'custom_image_sizes' );
/**
 * Make custom sizes selectable from WordPress admin.
 *
 * @param string[] $size_names Array of image size labels keyed by their name. Default values include 'Thumbnail', 'Medium', 'Large', and 'Full Size'.
 * @return string[] Modified array
 */
function custom_image_sizes( $size_names ) {
	$new_sizes = array(
		'blog_featured' => __( 'Blog Featured', 'text-domain' ),
		'facebook' => __( 'Facebook', 'text-domain' ),
	);

	return array_merge( $size_names, $new_sizes );
}

In

'blog_featured' => ( 'Blog Featured', 'text-domain' ), 'facebook' => ( 'Facebook', 'text-domain' ),

blog_featured and facebook on the left are important and these are the handles of the custom image sizes. You will of course want to replace these with your own.

Reload the Oxygen editor and the relevant custom image sizes should now appear.

Note that the custom image sizes will only appear if they are applicable to the selected image. For example, with a 1280x853 image selected, blog_featured will not appear since we set it to 1920 x 1200 and both the width and height are greater than the image’s size. Remember that resizing in WordPress refers to downscaling only, not upscaling.

Source: Using Responsive SRCSET Images & Custom Image Sizes in Oxygen

Inline images added via Dynamic Data option

The image_size_names_choose filter unfortunately only works for images added using the Media Library option, but not if you want to say show featured image of the post in the loop in a specific size i.e., using the dynamic data option.

Fear not for there is the mighty Oxygen's PHP Function Return value who will come to our rescue!

Register a custom function.

Title: [Function] Return URL of featured image given image size

Code: