[Post Featured Image]: Add image size controls

[ntsekouras]

What problem does this address?

We should add image size controls to Post Featured Image block (e.g. full, thumbnail, medium, large, custom-theme-size, etc..). Here is @justintadlock 's comment for reference.

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.

Initial design from @jasmussen:

[Mamaduka]

This looks like a good enhancement for the ImageSizeControl component.

[markhowellsmead]

An additional note on this: the current function (which uses get_the_post_thumbnail) currently outputs the thumbnail HTML for the full-sized image. This means that in a basic install where the registered image size thumbnail is set to cropped 400x400, this small thumbnail isn't used.

[ibes]

@markhowellsmead
I don't get why the full-size image is pulled after all.
Can you support me understand that? 'post-thumbnail' is default so I don't get where 'full' is introduced.

I try to figure out a way how to use existing filters to make that work.
All I found so far is https://generatepress.com/forums/topic/query-loop-post-template-image-size/
Which has no effect on the image that is actually loaded - just effects the image display dimensions.

[markhowellsmead]

There appears to be a little confusion in the code, in as far as there being two thumbnail sizes in the code: thumbnail and post-thumbnail. I've run through the function stack and debugged this process and it doesn't look as though this is the problem.

The function wp_get_attachment_thumb_file looks for the thumbnail for the image. I've regenerated the thumbnails for my images and they are correctly stored, and the attachment meta data is created. This function searches for an array entry $imagedata['thumb'].

However, as far as I can see, the image regeneration function wp_create_image_subsizes doesn't add an entry to the meta data array with the key thumb, so this will never be found. Therefore, the full-size image is selected.

[markhowellsmead]

I've added this to Trac at https://core.trac.wordpress.org/ticket/54383.

[markhowellsmead]

The response in Trac is that the issue was first flagged in https://core.trac.wordpress.org/ticket/17262.

Eleven years ago.

You might want to find a different solution.

[ibes]

Oh wow - this is absurd.
Useless gutenberg blocks because a core function was not fixed in 11 years ...

Thanks for going down the rabbit hole @markhowellsmead

@markhowellsmead Would you be open to climb down the rabbit hole together to figure out where to put some tape?
Maybe there is a way to deliver wp_get_attachment_thumb_file with the $imagedata['thumbnail] and than hook into that process to end up with a more healthy fallback than full?!

I used the latest posts blocks for blog posts. But am back with wanting to query CPTs.
And I would like to stay as good with core blocks as possible. Not pulling into a whole group of oppinionated blocks just to compensate for this strange behaviour.

[ibes]

add_filter( 'post_thumbnail_size', 'update_default_thumbnail_size_for_function_get_the_post_thumbnail' );
function update_default_thumbnail_size_for_function_get_the_post_thumbnail( $size ) {
	if ( $size === 'post-thumbnail' ) {
		return 'medium';
	}
	return $size;
}

this might help to set an default image size smaller than full

It replaces the unset post-thumbnail with medium.

Seems to work for me in the frontend, but not in the editor/backend.
Don't get why.

[markhowellsmead]

I don't think it's a brilliant idea to remove the opportunity to use the post thumbnail in this way. (It might make sense for an individual developer to use this, if that's a project requirement.)

Replacing post-thumbnail with thumbnail using this filter works, returning the correctly-sized thumbnail image for the post-featured-image block.

add_filter( 'post_thumbnail_size', 'update_default_thumbnail_size_for_function_get_the_post_thumbnail' );
function update_default_thumbnail_size_for_function_get_the_post_thumbnail( $size ) {
	if ( $size === 'post-thumbnail' ) {
		return 'thumbnail';
	}
	return $size;
}

[markhowellsmead]

For the post-featured-image block, I suggest modifying the call in the render_block_core_post_featured_image method from

$featured_image = get_the_post_thumbnail( $post_ID );

to

$featured_image = get_the_post_thumbnail( $post_ID, 'thumbnail' );

[dreamwhisper]

I'd like to see the full, thumbnail, medium, large, & custom-theme-size(s) selectable to allow for greater flexibility in theme design, especially when the same image may be shown at different sizes throughout a site.

[hanopcan]

I'm also keen to see this feature hit production as from a performance point of view not being able to control the size of the featured image is a problem 💚

[Mamaduka]

I am assigning this to myself. I will have PR ready shortly.

[NicoHood]

You can only choose the dimensions, not the image size type, right? Like medium, large, etc. It seems to be missing in WordPress 6

[kangabell]

I'm not seeing the dropdown to select image size (thumbnail, medium, etc.) either. Tested in 6.0 with the "Twenty Twenty-Two" theme, no plugins active. Is there a workaround to get this to appear?

[Majirefy]

You can only choose the dimensions, not the image size type, right? Like medium, large, etc. It seems to be missing in WordPress 6

Same problem, anyone know why?

[NicoHood]

I dont know why, but I dont have this feature in my wordpress 6.1 installation. Is this a bug of the astra theme?

[errotu]

It's rather hidden: You have to click on the three dots next to "Dimensions" ("Größe") and select "Image Size".

[markhowellsmead]

@errotu The controls for the Post Featured Image block in the Single template are completely different than in the Archive view. Hardly any of those controls are available and there's no option to choose the image size from the list of preset sizes.

[EricWorrall]

You can use editor.PostFeaturedImage to append checkboxes and other controls to the featured image block on the post editor. The options can then be used to modify the display of the featured image. I did this with Magazine Plus, which uses some non-standard hooks for displaying posts, but you can also do it with more standard hooks. If all else fails you can use the options to control whether CSS scripts are enqueued which create the outcome you want.

This post got me pointed in the right direction.

[justintadlock]

You should see an "Image Size" option if you click the "vertical ellipsis" button under the "Dimensions" panel. If you check that option, a new "Image Size" dropdown select should appear:

[nicmare]

You should see an "Image Size" option if you click the "vertical ellipsis" button under the "Dimensions" panel. If you check that option, a new "Image Size" dropdown select should appear:

wow unbelievable i had to google this and making at least 3 clicks for this hidden feature. thank you !

[scrobbleme]

This should be opened again. There is still no option to choose a predefined size for single templates.

[vayurobins]

It's still available @scrobbleme ;-), it's just called "Resolution" now.

[scrobbleme]

It's still available @scrobbleme ;-), it's just called "Resolution" now.

@vayurobins Yes, but not when editing templates within the site editor. The is no resolution available.

[vayurobins]

@scrobbleme, that screenshot is from the Full Site Editor, and I was editing the Archives Template. Using Twenty Twenty Three theme.

[scrobbleme]

@scrobbleme, that screenshot is from the Full Site Editor, and I was editing the Archives Template. Using Twenty Twenty Three theme.

@vayurobins Sorry, it is not working for single templates. "Loops" are fine. I just saw, that there is a new issue for this: #50271

[markhowellsmead]

If I choose the thumbnail size, then the following HTML is generated.

<img width="200" height="150" src="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-200x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" style="object-fit:cover;">

If I choose the "medium" size, then the following HTML is generated. My medium size is 720px, but the srcset options go up to 1600px. Is this intended behaviour? 🤔

<img width="720" height="480" src="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-720x480.jpg" class="attachment-medium size-medium wp-post-image" alt="" decoding="async" style="object-fit:cover;" fetchpriority="high" srcset="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-720x480.jpg 720w, https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-1600x1067.jpg 1600w, https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-1024x683.jpg 1024w" sizes="(max-width: 720px) 100vw, 720px">

[nicmare]

If I choose the thumbnail size, then the following HTML is generated.

<img width="200" height="150" src="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-200x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" style="object-fit:cover;">

If I choose the "medium" size, then the following HTML is generated. My medium size is 720px, but the srcset options go up to 1600px. Is this intended behaviour? 🤔

<img width="720" height="480" src="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-720x480.jpg" class="attachment-medium size-medium wp-post-image" alt="" decoding="async" style="object-fit:cover;" fetchpriority="high" srcset="https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-720x480.jpg 720w, https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-1600x1067.jpg 1600w, https://WEBSITE/wp-content/uploads/2016/05/20160521_DSCF6661-1024x683.jpg 1024w" sizes="(max-width: 720px) 100vw, 720px">

yes sure what else did you expect?

[markhowellsmead]

Errr… that the image displayed in the frontend would be the "medium" image size. (It isn't: it's always the "large" image size. And yes, I'm fully aware of how the srcset works on retina screens.)

[nicmare]

if the viewport is large enough its loading the high resolution image from the srcset. by default your medium image (20160521_DSCF6661-720x480.jpg)

[markhowellsmead]

Nope, it always loads 20160521_DSCF6661-1600x1067.jpg, irrespective of screen size on screens at or larger than 720px.

[nicmare]

if you expect something different or have more in depth questions to that specific behavior, you should better create a new thread. this one here is about the image size / resolution control in gutenberg.

[markhowellsmead]

Forgive me for misunderstanding: how does adding the block in the single template fix the issue in the post loop?

[nicmare]

@scrobbleme, that screenshot is from the Full Site Editor, and I was editing the Archives Template. Using Twenty Twenty Three theme.

@vayurobins Sorry, it is not working for single templates. "Loops" are fine. I just saw, that there is a new issue for this: #50271

thats true. noticed this as well. but as a work around simply copy the featured image block from loop with "resolution" to medium or what ever set and paste it in your single page template. you will notice it now loads the right image size

[scrobbleme]

Forgive me for misunderstanding: how does adding the block in the single template fix the issue in the post loop?

@markhowellsmead It doesn't ;)
"Loop" (like archive or just query loop block) and "Single" are different… loop is working as expected ;)

But there are requirements to show a custom resolution ("add_image_size") in a single template as well (i.e. migrating legacy sites to the block editor)

[Luke-SF]

@vayurobins Yes, but not when editing templates within the site editor. The is no resolution available.

Not seeing the resolution picker on normal Image block. Oddly enough resolution does show in the [ settings ... ] line drop down menu on the block editor.

[sinanisler]

custom sizes are not visible.

add_image_size( 'size-400', 400, 400, true );

[vollyimnetz]

If you are programming your own block-theme you may use the attribute "sizeSlug" to set the custom-image-size "by hand".

<!-- wp:post-featured-image {"sizeSlug":"artikelbild","overlayColor":"contrast","dimRatio":0,"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50","top":"calc(-1 * var(--wp--preset--spacing--50))"}}}} /-->

Found in: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/post-featured-image/block.json