Featured Image block: Allow free-form resizing

[kjellr]

What problem does this address?

When working with in the Query block's grid view, it would be great to allow for themes to set a consistent height/crop for all of the Featured images within.

Example use case, where each image is cropped to a square:

The current lack of dimension controls on the featured image block means individual image aspect ratios are unchanged, causing a bit of a jumpy layout:

What is your proposed solution?

If we enable dimension controls and allow object-fit properties to be configured (defaulting to cover), we can enable some much more coherent and nice layouts. Shown here with some custom border radii applied as well:

Here's what the featured image inspector controls could look like:

This was previously explored in #27545

[ntsekouras]

This is related: #24660. There are design explorations as well.

[ianstewart]

Additional example where automatic cropping as an option would be valuable:

[annezazu]

To make sure feedback isn't lost from this recent WP Tavern post, I'm sharing here as it's relevant to the discussion above:

There is no way to set the size of the image output by the Post Featured Image block. The only way to get a uniform size at the moment is to pre-crop the images before uploading them to WordPress. There is no reason this should not essentially be a variation of the Image block. The only thing featured images need that is different is the option to link to the post.

This was identified as a current pain point in the FSE experience.

[jasmussen]

I took the liberty of tweaking the title and content of this ticket a little bit, with some mockup work from the now-closed #31418.

[leph83]

I would add another Setting with a slider where you can adjust the ratio.
And if you add this feature, it would be nice, if you can choose which part of the image should always be visible.
Like the control in the cover block.

[paaljoachim]

The controls suggested by @kjellr Kjell seems like a good first iteration/version.

I do have one question. Will the "contain" option in a way crop very tall images? So that all images look nice at the height and width suggested?

---

We do also have the possibility to use the Focal point picker having a more finetuned selection as @leph83 touches upon.

---

For a more advanced version we have @shaunandrews Shaun's mockups here: #24660 (comment)
These are more complex. Mockup of controls for the Cover and Group blocks.

[leph83]

@paaljoachim I'm not a huge fan of fixed pixel sizes. It's not responsive.

[jasmussen]

The blue px indicator is meant to be a unit selection dropdown, so you could choose other units, such as %, vw, vh, em, rem, etc.

[leph83]

The blue px indicator is meant to be a unit selection dropdown, so you could choose other units, such as %, vw, vh, em, rem, etc.

So if I have 3 Columns with a picture inside of each, that I wanted to make square I could set the properties to 100% height and 100% Width to achieve that? That would work for me.

I don't see the possibility to choose the object position in your design, when I chose cover as my scaling option. That would be nice to have.

[jasmussen]

So if I have 3 Columns with a picture inside of each, that I wanted to make square I could set the properties to 100% height and 100% Width to achieve that? That would work for me.

Well, if those 3 columns were part of a query, then setting the dimensions of one of the featured images to square would do it for all of them, yes.

I'd agree it would be nice to also have the focal point picker for the featured image block, but I'd think it would be a nice followup to do. Also keep in mind that themes could do it in the manually as well.

[leph83]

Oh I missed the part, where it's a query. This feature would also be amazing for the Gallery Block and the Image Block itself too

[ntsekouras]

In order to use object-fit here we need to have set a width and a height/min-height. Should we have some defaults like width: 100% and height/min-height: 200px for example? Can we communicate this better by showing/hiding scale controls depending the existence of width and height values?

--edit: Maybe having only a height control makes more sense? Do we have use cases that we would want to restrict featured image's width, especially when the block has another wrapper outside the img element (currently a p)?

Any thoughts?

[jasmussen]

In order to use object-fit here we need to have set a width and a height/min-height.

Excellent point. Without them they aren't that useful. One option: only show the image scaling properties if a width and height have been set:

[carolinan]

Could the featured image be a variant of the image block, just with a different source?
The image block has more features and is tested, yet, trying to import controls from it to the featured image block or the custom logo has proven to be very difficult.

[ntsekouras]

Could the featured image be a variant of the image block, just with a different source?

I recently made some exploration for making it a block variation of Cover but it needs way more explorations as the flows become difficult to reason with. I'm not sure about the source attribute since this is a dynamic value and haven't worked with this handling before..

I believe landing at least a basic handling for now like the above would be okay for now and gives value, in order to make it to 5.8. I'll have a PR soon for this and we can test how it feels.

[justintadlock]

To make sure feedback isn't lost from this recent WP Tavern post, I'm sharing here as it's relevant to the discussion above:

There is no way to set the size of the image output by the Post Featured Image block. The only way to get a uniform size at the moment is to pre-crop the images before uploading them to WordPress. There is no reason this should not essentially be a variation of the Image block. The only thing featured images need that is different is the option to link to the post.

This was identified as a current pain point in the FSE experience.

I wanted to add some clarification to this since it was added to a ticket about Dimensions. While related, I was specifically referring to the Image Size control (e.g., full, thumbnail, medium, large, custom-theme-size, etc.) and not width/height controls. These are the sizes created via set_post_thumbnail_size() and add_image_size().

This ticket seems to be moving toward a path for dimension and scaling controls, which is great, but I don't want this feature to get lost if it's out of scope for this ticket. I can open a separate ticket if needed.

[jasmussen]

Thank you for the reminder, Justin. Here I included the thumbnail size picker:

[melchoyce]

Instead of having to specify an exact width and height by default, it might be nice to explore the ratio picker the image block uses:

[antonyjsmith]

Just to weight in here to provide some end user perspective.

Rolling out a new block which is aimed at replacing blocks like 'Latest Posts' before reaching feature parity is a major pain in the ass as you keep having to relearn stuff, hit brick walls and end up at GitHub, which lets be honest, isn't somewhere your average Joe is going to want to start digging around to find out why they can't change the image size in a significant new feature.

By way of example there are now two blocks to create a grid of posts and one handles featured images better than the other provided it's a post I want to use and not a CPT or Page, if that's the case then I'll have to hard crop them all. This is incredibly frustrating, a waste of time, confusing and tough to explain to an end user.

I just find it a lot of wasted effort to have all this discussion around a completely different implementation when the featured image control works perfectly well in the 'Latest Posts' block and is familiar to a user since it's basically the same as an image block.

Having to relearn an approach with a replacement block and discover limitations, inconsistencies of feature sets to what on the surface appear the same components and lack of feature parity for existing approaches with replacement blocks is a consistent blight on the Gutenberg project.

[justintadlock]

Should this ticket be closed by #31634?

I was under the impression that an Image Size control was a part of this, which is why I didn't open another ticket (it would also partially cover @antonyjsmith's concerns). I don't think this is in the PR.

[ntsekouras]

The issue was closed automatically from the PR and addressed the initial proposed enhancements. There are more to come to this block (Featured Image) and we have this issue for consolidating the 'posts list' blocks.

I created a new issue for the image controls here: #33789