Image Block: Surface aspect-ratio tool for custom image dimensions

[jasmussen]

Many pattern designs rely on a specific dimension of an image in order to provide a compelling example. For example this circular avatar pattern:

At the moment, if you mean to update this person with a photo of your own, unless you replace it with a new image of the same dimensions and crop, the pattern will be broken. In order to solve this, the pattern should be able to retain its dimensions and aspect-ratio, so even if you drag a landscape photo into the pattern, it will be correctly masked to fit.

In the user interface, we can surface such preset aspect ratios in a flyout menu. This keeps the width/height controls, as the Featured Image has:

One issue that exists with the featured image block in trunk is that if you apply both a width and a height, the aspect ratio essentially becomes non-functional. This shouldn't happen, so a few things we can do, both for Image, and for Featured Image as a followup.

We can, when you apply an aspect ratio, the width value is removed, set visually to "Auto" and disabled. You'd have to choose "original" aspect ratio to enable them again.

An image with an aspect ratio can work together with an explicit width, however, it just can't work with both width and height. So what we could do instead is to clear the aspect ratio back to "Original" if you fill out both width and height values. I.e.:

• Selecting an aspect ratio clears height.
• Adding back a height clears the aspect ratio.

We can potentially pair this with a snackbar that notes why either is being cleared.

---

This ticket was updated May 10.

Previous version

In the user interface, we can surface such preset aspect ratios in a dropdown. Shown here, 6 common presets:

The dropdown affords a rich visual shape representation of the aspect ratio numbers. When an aspect ratio is applied, the Height input field says "Auto", to indicate that its value is dynamically dependant on the width.

If you then proceed to add a custom value to the height field after all, that gives you a custom aspect ratio:

This is simple to translate to CSS as the aspect ratio of a 540x320 image as shown in the example can simply be stated using aspect-ratio: 540 / 320;. See also this codepen for how that can work responsively.

To represent aspect ratios, especially as custom aspect ratios are possible, it would be useful if the shape icon was dynamically drawn based on each aspect ratio.

This ticket was updated Sep. 13.

See initial proposal

When you set square image dimensions on a rectangular image, the image gets skewed (note, there's a bug in the editor view at the moment). The skewed image is not that useful, and rarely what you want.

Since we know the original aspect ratio, we can surface a scaling tool when a non-natural aspect ratio is shown, letting you choose the scaling type so that the image gets masked instead of skewed:

The tool would simply apply object-fit: cover; to the image, and work the same as how the Featured Image block does, letting you choose the scaling mode in a segmented control:

The ability to set the scaling mode would be very useful for patterns that perhaps include circular photos which when replaced with your own non-square images could become pill-shaped. Site Logo could also benefit from the maintaining the original aspect ratio.

In order for masked image to scale responsively according to a new aspect ratio, the aspect-ratio property can be leveraged as is shown in this codepen.

See also:

• Image: Improve the inspector, adopt the unified dimensions panel #38068
• Make it easier to quickly turn duotone on/off #38556
• Duotone: Duotone filter button should always be at the end #31373
• Image Tools: Add dedicated toolbar section #38988
• Duotone/Filters: Presets only in block toolbar, advanced filtering in inspector #39452

[mtias]

Instead of prioritizing explicit width / height, I'd want to explore using the aspect ratio tool (similar to the hard-cropping one) used. We can apply it to the cover block as well. We can still support resizing while maintaining aspect ratio.

We should also do this in conjunction with #41142 to support the creation of pattern with placeholders much better.

[richtabor]

Instead of prioritizing explicit width / height, I'd want to explore using the aspect ratio tool

I agree.

It's a bit rudimentary, but I've experimented with aspect-ratio tied to image sizes — where selecting an aspect ratio calculates the proper height value from the width (and the object-fit crops it properly). Then when you resize, the height/width ratio is maintained.

CleanShot.2022-05-27.at.10.39.47.mp4

This is just an example, not the UI I think we should go with this implementation. :)

[isocialtish]

I was just speaking with a customer who was requesting this feature specifically in the Post Featured Image block.

[MaggieCabrera]

Would the Aspect ratio options actually change the dimension values or would they change the aspect-ratio CSS value?

As shortcuts to setting dimensions as well as applying object-fit: cover;, a single unified control is much simpler.

How do you decide which object fit to use in which case? And what happens when the user provides its own dimensions, do we still see the object fit controls?

[jasmussen]

Would the Aspect ratio options actually change the dimension values or would they change the aspect-ratio CSS value?

I'd love for it to set aspect-ratio. It wouldn't work in all browsers, but as a progressive enhancement it would in new ones, and it would gracefully fall back.

How do you decide which object fit to use in which case? And what happens when the user provides its own dimensions, do we still see the object fit controls?

Stretch isn't that useful, and something you could accomplish on your own if you wanted to, by supplying off dimensions. Contain could have use cases, but I also think we could start without it, and then add a choice between the type of object-fit when we find that necessary.

[MaggieCabrera]

Would the Aspect ratio options actually change the dimension values or would they change the aspect-ratio CSS value?

I'd love for it to set aspect-ratio. It wouldn't work in all browsers, but as a progressive enhancement it would in new ones, and it would gracefully fall back.

But if dimensions are given, aspect ratio won't apply at all. And I think all images do have inline width and height values, I'd have to test it on the block. Still, controlling both dimensions and aspect ratio would be contradictory.

[jasmussen]

Just to step back for a moment, the main problem to solve with the aspect ratio presets is to enable you to drag and drop your big landscape photo into this pattern, and have the perfect circle and dimensions of the original pattern stick and be unchanged, just with your new updated photo:

When you pick an aspect ratio, I suppose the 2nd value becomes determined by the first one, so we could potentially gray out one of the width/height input fields if need be.

I also made this codepen which dives into some of the responsiveness.

[MaggieCabrera]

When you pick an aspect ratio, I suppose the 2nd value becomes determined by the first one, so we could potentially gray out one of the width/height input fields if need be.

That sounds reasonable! and I agree that aspect-ratio is preferable, I was worried about confusing interactions with it.

Thanks for providing the extra context for this.

[scruffian]

When we get round to this we should add the same tools to the Post Featured Image block.

[mtias]

Can we explore a design that combines the number presentation of the crop tools and a more visual symbol of what the rectangle looks like?

[cbirdsong]

This is great. The first thing users will ask is where is the Focal Point Picker? It needs to be included in the solution.

This was my immediate thought. People are going to use this on portraits and immediately get it cropping someone's head from the eyebrows down.

I would also raise this issue:

• Create a system for inserting site/post metadata into generic blocks #37753

It is so wasteful to duplicate work across so many single-purpose blocks.

[jasmussen]

This was my immediate thought. People are going to use this on portraits and immediately get it cropping someone's head from the eyebrows down.

Agreed. I wonder, can we approach this as a separate issue? The control that exists on the Cover block has a rather huge resting footprint:

I like to think that we can potentially put that in an ItemGroup/Flyout combo to reduce its footprint, and in doing so port it to both Featured Image and Image blocks separately. What do you think?

[richtabor]

@jasmussen I took the ideas and put them in today's Image block panel to theorize the simplest implementation for getting this into the 6.3 release. Here's the prototype.

What do you think of this approach, utilizing the existing Settings panel (where the block's image settings already are)?

aspect-ratio-3.mp4

Key concepts:

• I like "Auto" better than "Original" for the initial "no aspect ratio" label; as it is used in the input fields too.
• I've modified the select values to have additional context (i.e. "Square - 1:1"). It does seem a bit friendlier to me than just listing out numbers.
• Uses standard select control, just like "Resolution", for easy implementation.
• Applying an aspect ratio sets the height and width to "Auto".
• Changing height or width (either Input or ResizableBox) will set aspect ratio back to "Auto".
• I put "Scale" above the height/width controls, as they aren't actionable where scale is (not the same as post-featured-image thought).

Additional thoughts:

• Do we need the scale control for cover/contain?
• We should update the Post Featured Image block to use these same mechanics if possible.

[jasmussen]

Prototype looks great, and agree with your takeaways, nice iteration. One question, though:

Changing height or width (either Input or ResizableBox) will set aspect ratio back to "Auto".

This is the tricky bit. Going back to the original issue, the challenge to solve is to allow you to create a pattern that looks like this:

... and then let you drop any odd image into that circular avatar dropzone to update it, and have it not explode. In other words, you need to be able to combine a custom width and height with the cover value, and if I'm not misunderstanding, then changing this back to "Auto" would break that ability.

[richtabor]

Good point. We would technically need to separate image replacement from image resizing (even though the attributes do change when you replace an image). 🤔

[richtabor]

So you're thinking if set to "cover" then the aspect ratio is maintained when replacing? Or we implement the whole syncing of height and width? #47963 (comment)

[jasmussen]

Could we do it so an image replacement (drop one image on top of another) never changes its dimensions? It seems like when I design the pattern and set the image to 100x100+cover, I should be able to trust that's and remains.

If the main question is "when do we show the cover/contain" control, can we do that whenever dimensions are entered that aren't the intrinsic ones from the image?

Worst case, we could have a "Custom" aspect ratio, which is just width/height. Like, if you set your image to 400x200, we apply aspect-ratio: 400/200;, and it works.

[richtabor]

Worst case, we could have a "Custom" aspect ratio, which is just width/height. Like, if you set your image to 400x200, we apply aspect-ratio: 400/200;, and it works.

I'm ok with this.

If the main question is "when do we show the cover/contain" control, can we do that whenever dimensions are entered that aren't the intrinsic ones from the image?

What about if aspect ratio is not Auto/Original, then the cover/contain control is available?

[jasmussen]

What about if aspect ratio is not Auto/Original, then the cover/contain control is available?

That works.

[scruffian]

Now that #51545 is merged I think we can close this.

[rfischmann]

Why were the 25%/50%/75%/100%/Reset buttons removed since WordPress 6.3? They were so useful… 😓

[AhmadRaza9]

Is there any way to modify Gutenberg Image Block "Aspect Ratio" Settings, I want to add my custom aspect ratio

[jasmussen]

Here's a mockup showing how we might reintroduce those 25/50/75/100% shortcuts.