Aspect Ratio Property

Feature Requests
1

Would it be too demanding to ask for aspect-ratio to be added to the available CSS properties in the block inspector?

May just be a “me” thing, but I use it all the time. I love that we have object-fit, but would love to have access to aspect-ratio to round this out.

For the record, I use it on images as well as divs containing images if I need an image to maintain a certain look regardless of screen size.

6 Likes
2

I like this suggestion, so +1 from me.
Will save a couple of steps compared to the old school method.

1 Like
3

I have stopped generating multiple image sizes since the aspect ratio property in css picked up browser support. It’s very good way to get the desired aspect ratio without filling up the server storage.

I use the following images sizes generally while removing the default wp sizes. Aspect ratio property with object fit takes care of the rest. Previously I used to generate image sizes for different aspect ratio

// Custom image sizes
add_theme_support( 'post-thumbnails' );

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

// Make sizes available in the theme
function my_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        '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', 'my_custom_image_sizes' );

// Remove default image sizes 
add_filter( 'intermediate_image_sizes', 'my_remove_default_img_sizes', 10, 1);

function my_remove_default_img_sizes( $sizes ) {
  $targets = ['thumbnail', 'medium', 'medium_large', 'large', '1536x1536', '2048x2048', 'woocommerce_thumbnail', 'woocommerce_single', 'woocommerce_gallery_thumbnail'];

  foreach($sizes as $size_index=>$size) {
    if(in_array($size, $targets)) {
      unset($sizes[$size_index]);
    }
  }

  return $sizes;
}
4 Likes
4

Thanks for hinting @anon32808828.
Bookmarked for further research :sunglasses:

5

@Marius You might also be interested in the below code. I use it to generate webp images for image sizes and it keeps the original (full size) image as jpg/png for backward compatibility with older browsers. Also saves some space on the server and I don’t use any image optimization plugins.

// Retain full size image in original format and make other sizes in webp
function my_wp_image_editor_output_format( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
	$formats['image/png'] = 'image/webp';
 
    return $formats;
}
add_filter( 'image_editor_output_format', 'my_wp_image_editor_output_format' );
8 Likes
6

Did we get this, then it was removed? I could have sworn I saw aspect ratio a few days ago.

I might just be going crazy, though.

7

Not that I’m aware of, but can’t confirm, unfortunately.

8

Crazy it is, then, I guess.

9

This feature would be very useful!

10

Hi,

Do you mean WP can natively generate webp out of the box?
Is there a requirement like gd or imagik PHP extension or is it something else?

When browser doesnot support webp, full size image is sent for all sizes?

1 Like
11

@yankiara Yes. WP can generate native webp images out of box with the above snippet.

I use Imagick. You will need Imagick or GD to post process images on any WP site.

Browser acceptance for webp is pretty decent. Check here. WebP image format | Can I use... Support tables for HTML5, CSS3, etc

The above snippet will deliver full size original image .jpg / .png to non supported browsers. It generates webp for all other sizes to save space.

1 Like
12

Except for older Safari. Always making life difficult by not supporting stuff all other browsers have been for 5+ years.

13

Introduced in 1.2.9.4.4.

2 Likes
14

Thanks for this, Louis.
One little tweak still needed - the input box for aspect ratio via the global classes panel is a bit wonky. See below. Would also be nice to have the object-fit parameters editable from the same panel as well.
Not urgent, but thought I’d brought it to your attention.

https://jam.dev/c/935ee845-2706-413a-8935-85fcc7aeb9ae

15

Funny coincidence @owynter. I had recently submitted the same request for the object-fit parameter here. Let’s vote that up :smiley:

1 Like