Skip to content

Instantly share code, notes, and snippets.

@Lego2012
Created September 7, 2022 08:31
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Lego2012/7a292efe00ffc13854bc5b5be243b6ae to your computer and use it in GitHub Desktop.
Save Lego2012/7a292efe00ffc13854bc5b5be243b6ae to your computer and use it in GitHub Desktop.

The bricks theme comes without any usable image sizes for your design needs. Feel free to copy this cheat sheet to your Bricks child theme’s functions.php to get usable image sizes in 1:1, 16:9, 3:2, 4:3, 3:4, 2:3 and the original aspect ratio of the image.

Make sure to always choose the resolution that most closely matches the maximum size that the image will be displayed at. All other smaller resolutions with the same aspect ratio will be automatically set in the srcset for smaller devices / resolutions (but it will max out at the one you set).

If you already have images uploaded, you will have to re-generate them using https://de.wordpress.org/plugins/regenerate-thumbnails/ 3

/**
 * Custom Image Sizes
 */
add_theme_support( 'post-thumbnails' );

// 1:1 Hard Crop
add_image_size( '1x1-crop-1920px', 1920, 1920, true ); // Hard Crop Mode
add_image_size( '1x1-crop-1440px', 1440, 1440, true ); // Hard Crop Mode
add_image_size( '1x1-crop-960px', 960, 960, true ); // Hard Crop Mode
add_image_size( '1x1-crop-480px', 480, 480, true ); // Hard Crop Mode
add_image_size( '1x1-crop-240px', 240, 240, true ); // Hard Crop Mode

// 16:9 Hard Crop
add_image_size( '16x9-crop-1920px', 1920, 1080, true ); // Hard Crop Mode
add_image_size( '16x9-crop-1440px', 1440, 810, true ); // Hard Crop Mode
add_image_size( '16x9-crop-960px', 960, 540, true ); // Hard Crop Mode
add_image_size( '16x9-crop-480px', 480, 270, true ); // Hard Crop Mode

// 3:2 Hard Crop
add_image_size( '3x2-crop-1920px', 1920, 1280, true ); // Hard Crop Mode
add_image_size( '3x2-crop-1440px', 1440, 960, true ); // Hard Crop Mode
add_image_size( '3x2-crop-960px', 960, 640, true ); // Hard Crop Mode
add_image_size( '3x2-crop-480px', 480, 320, true ); // Hard Crop Mode

// 4:3 Hard Crop
add_image_size( '4x3-crop-1920px', 1920, 1440, true ); // Hard Crop Mode
add_image_size( '4x3-crop-1440px', 1440, 1080, true ); // Hard Crop Mode
add_image_size( '4x3-crop-960px', 960, 720, true ); // Hard Crop Mode
add_image_size( '4x3-crop-480px', 480, 360, true ); // Hard Crop Mode

// 3:4 Hard Crop
add_image_size( '3x4-crop-1920px', 1440, 1920, true ); // Hard Crop Mode
add_image_size( '3x4-crop-1440px', 1080, 1440, true ); // Hard Crop Mode
add_image_size( '3x4-crop-960px', 720, 960, true ); // Hard Crop Mode
add_image_size( '3x4-crop-480px', 360, 480, true ); // Hard Crop Mode

// 2:3 Hard Crop
add_image_size( '2x3-crop-1920px', 1280, 1920, true ); // Hard Crop Mode
add_image_size( '2x3-crop-1440px', 960, 1440, true ); // Hard Crop Mode
add_image_size( '2x3-crop-960px', 640, 960, true ); // Hard Crop Mode
add_image_size( '2x3-crop-480px', 320, 480, true ); // Hard Crop Mode

// Original Soft Crop
add_image_size( 'original-1920px', 1920, 1920 ); // Hard Crop Mode
add_image_size( 'original-1440px', 1440, 1440 ); // Hard Crop Mode
add_image_size( 'original-960px', 960, 960 ); // Hard Crop Mode
add_image_size( 'original-480px', 480, 480 ); // Hard Crop Mode
add_image_size( 'original-240px', 240, 240 ); // Hard Crop Mode

// Make sizes available in Bricks
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        '1x1-crop-1920px' => 'Cropped 1:1 1920px', 
        '1x1-crop-1440px' => 'Cropped 1:1 1440px', 
        '1x1-crop-960px' => 'Cropped 1:1 960px', 
        '1x1-crop-480px' => 'Cropped 1:1 480px', 
        '1x1-crop-240px' => 'Cropped 1:1 240px', 
        '16x9-crop-1920px' => 'Cropped 16:9 1920px', 
        '16x9-crop-1440px' => 'Cropped 16:9 1440px', 
        '16x9-crop-960px' => 'Cropped 16:9 960px', 
        '16x9-crop-480px' => 'Cropped 16:9 480px', 
        '3x2-crop-1920px' => 'Cropped 3:2 1920px', 
        '3x2-crop-1440px' => 'Cropped 3:2 1440px', 
        '3x2-crop-960px' => 'Cropped 3:2 960px', 
        '3x2-crop-480px' => 'Cropped 3:2 480px', 
        '4x3-crop-1920px' => 'Cropped 4:3 1920px', 
        '4x3-crop-1440px' => 'Cropped 4:3 1440px', 
        '4x3-crop-960px' => 'Cropped 4:3 960px', 
        '4x3-crop-480px' => 'Cropped 4:3 480px', 
        '3x4-crop-1920px' => 'Cropped 3:4 1920px', 
        '3x4-crop-1440px' => 'Cropped 3:4 1440px', 
        '3x4-crop-960px' => 'Cropped 3:4 960px', 
        '3x4-crop-480px' => 'Cropped 3:4 480px', 
        '2x3-crop-1920px' => 'Cropped 2:3 1920px', 
        '2x3-crop-1440px' => 'Cropped 2:3 1440px', 
        '2x3-crop-960px' => 'Cropped 2:3 960px', 
        '2x3-crop-480px' => 'Cropped 2:3 480px', 
        'original-1920px' => 'Original 1920px', 
        'original-1440px' => 'Original 1440px', 
        'original-960px' => 'Original 960px', 
        'original-480px' => 'Original 480px', 
        'original-240px' => 'Original 240px',
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Make sure to use the child theme (download in your bricks account) and not the main bricks theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment