Featured Image Block: Add support for fallback images

[andersnoren]

What problem does this address?

On archive pages, some posts lacking a featured image can lead to inconsistent looking layouts. For example, in the layout below, the third post is missing a featured image, resulting in that row being shorter than the other ones:

What is your proposed solution?

My suggestion would be to add a "Fallback image" option to the Post Featured Image block. If a post is missing a featured image, the image selected as a fallback image in the block options is output instead.

In this case, the result would be something like this:

You likely wouldn't want to use this on singular views, but I think it would help enable more consistent looking layouts on FSE archive pages. Especially in grid layouts with featured images set to fixed heights.

[carolinan]

+1 for this, this is common in classic PHP themes.

The option to enable and upload a fallback image can perhaps live in the global styles area?

[haszari]

I too have this need! Would love to set up a default image for all posts so I can have a consistent layout, e.g. an instagram style grid of square images (or random colours, overridden with JavaScript or CSS). I love the idea of using my blog as the primary social / sharing site, and leaning away from ad-supported platforms like Instagram and Twitter - but I also want the best layouts and design features on my WordPress site!

[slingshotdesign]

+1 would really like this feature, or a hook that we can use in our theme. It is very common in PHP themes.

[masteradhoc]

+1 for this with an option like #39170

[slingshotdesign]

A further thought on this, it might be very useful to be able to specify a placeholder image in the theme.json file.

For example: "settings": { "media" { "placeholder": "assets/images/placeholder.jpg" } }

When developing classic themes it's common to use the same placeholder image in various places throughout the theme.

[Olein-jp]

I couldn't find the existence of this issue and created #49629.

I'd like to +1 this feature. I very much agree with this feature.

I think we will see more block theme developers who write more code and less code in the future. So it would be nice to be able to set the default image from the GUI if possible.

If that is not possible, it would be nice to be able to set it via a hook or in theme.json.

[skorasaurus]

For anyone wanting to implement this, check out @justintadlock 's workaround using the post_thumbnail_html hook - #32447 (comment)

[paaljoachim]

I added the needs design label and will ping the various designers about this issue @WordPress/gutenberg-design

Adding a default featured image to the Global Styles area suggested by @carolinan here: #34865 (comment)
sounds like a good idea.

I am not sure where it would go.
Let's say an area for images would be added to where one can define specific global settings for images. Featured image, adding image automatically uses full size and perhaps other global settings for images...

[richtabor]

Can we come up with a solution that doesn't require any additional input for the user?

Like:
What if there was a placeholder type look to the empty image?
Do those classic theme filters still work?

[carolinan]

I think users want to customize the placeholder, not show an image that has been chosen for them, because that type of placeholder that we have in the editor will make the site look unfinished.

[Olein-jp]

Currently, when a Feature Image Block is placed, the image is only displayed on posts that have an image set. Conversely, if no image is set, nothing will be displayed. I think this should be improved.

Therefore, I think it would be good to be able to set a default image when a Feature Image Block is placed in a template in the Site Editor.

If we were to consider a method that does not require additional input from the user, it might be a good idea to temporarily display a Site Icon image, for example. (If no Site Icon image is set, nothing will be displayed...)

[Andrew-Starr]

Could it be possible to add this in the Post Featured Image block styles? - Styles > Blocks > Post Featured Image
Is global styles only for styles and not functionality such as this? I guess the clue is in the name, but worth asking anyway.

Something else to consider is it may be desirable for a user to only want a fallback image displayed when in the Query Loop and not on the single template.

[jasmussen]

Would it be appropriate or inappropriate to default to the image attached to a post if no explicit image has been chosen? If we do need to provide an additional fallback after that (say if zero images are uploaded to a post), I would agree that it should probably live in a global settings area and have a somewhat low footprint.

[richtabor]

because that type of placeholder that we have in the editor will make the site look unfinished.

Any type of fallback placeholder (custom, or Gutenberg-first) will make the site look unfinished though, as a post is missing its featured image.

[richtabor]

Something else to consider is it may be desirable for a user to only want a fallback image displayed when in the Query Loop and not on the single template.

This is another quirk.

I recall @scruffian having ideas on using a post's first image as the fallback, only in the Query Loop instance.

[Andrew-Starr]

I think ideally it would be something like this:

• core has a default fallback placeholder image for the featured image block
• themes could define their own fallback image in theme.json, similar to the way it works for bundled fonts
• users would be able to select/upload their own image to override core/theme
• the featured image block would have a control to toggle the fallback placeholder on/off (default would be off)
• when adding the featured image block to content or template, the user would be able to toggle the fallback on or off, so that if they add the block in the query loop/post template they can make use of the fallback image, and if they add the block to a singular template they may want to not enable the fallback in this location

[carolinan]

In the future, 😄 WordPress should just suggest a featured image from the media library first and Openverse second, one that matches the topic of the content/category.

[scruffian]

It would be good to add a setting to the block to use the first image in the post, which is what classic themes would often do.

[scruffian]

I made a start on this here: #51603

I'm not sure I'll have time to finish it off though so happy for anyone else to pick it up...

[DannyCooper]

I can see that #56573 has been implemented to automatically pull the first image. Would it be useful to implement a simple attribute so that developers can manually define their own fallback within patterns/templates? Something like this:

<!-- wp:post-featured-image {"fallbackSrc":"URL_TO_YOUR_FALLBACK_IMAGE"} /-->