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:
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.:
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-ratioproperty can be leveraged as is shown in this codepen.See also: