Documentation will be updated after Scripts Organizer version 3 is released.

Register image sizes that are visible in the Editor insertion

You registered new image size, regenerated all images but still when you insert image element your image size is still not shown.

<?php // register custom thumbnail size add_image_size( 'product-main', 1440, 800, true ); ?>
Code language: HTML, XML (xml)

To explain first what are the image settings inside the brackets:

  • product-main = image name
  • 1440 = width in pixels
  • 800 = height in pixels
  • true it will be cropped. set false if you don't want to crop (just resize)
screenshot 2021 05 10 at 21.01.36

To be able to have this inside the Oxygen Builder you will need to add this WordPress filter:

<?php // register custom thumbnail size add_image_size( 'product-main', 1440, 800, true ); // add custom custom sizes to image sizes array to use in page builders function dplugins_register_thumbs($sizes){ $sizes[ 'sidebar-thumb' ] = 'Sidebar Thumb'; return $sizes; } add_filter( 'image_size_names_choose', 'dplugins_register_thumbs' ); ?>
Code language: HTML, XML (xml)

Ok how should I add my images and what to change?

  1. Replace image name slug "your-image-name-1" (on both places)
  2. Replace image name "Image name 1", this will be displayed in DropDown
  3. The first number defines the image width
  4. The second number defines the image height
  5. "true" defines that image will be cropped, set "false" if you don't want that image to be cropped
<?php // register custom thumbnail size add_image_size( 'your-image-name-1', 440, 200, true ); add_image_size( 'your-image-name-2', 600, 300, true ); // add custom thumbnail sizes to image sizes array to use in page builders function dplugins_register_thumbs($sizes){ $sizes[ 'your-image-name-1' ] = 'Image name 1'; $sizes[ 'your-image-name-2' ] = 'Image name 2'; return $sizes; } add_filter( 'image_size_names_choose', 'dplugins_register_thumbs' ); ?>
Code language: HTML, XML (xml)
screenshot 2021 05 13 at 14.03.57

Code Implementation

  1. Open Scripts Organizer.
  2. Code Blocks > Add New
screenshot 2021 05 13 at 14.55.20

Code Block Settings

  1. TRIGGER LOCATION > Admin only
  2. SCRIPT LOCATION > PHP
screenshot 2021 05 13 at 14.56.11

After the new image size is registered you must regenerate thumbnails. You can use free plugins for that such as:

Be aware

If the image you have uploaded is smaller than the registered image size image will not be created.
Example: You registered image 100x50px and custom registered size is 200x100px, even after you regenerated images you will not have custom image size in the dropdown.

Marko Krstić

Owner of dPlugins. Started with design in 1999. Currently, besides dPlugins, he is an Art director at Scandic Hotels, delivering design for the Web and the App for 270 Scandinavian hotels.