WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.19k forks source link

Rethink "Featured Image" in the context of blocks #27617

Open kjellr opened 3 years ago

kjellr commented 3 years ago

While we're thinking through block-based themes and their templates, It might be worth expanding the concept of what a "Featured Image" is.

In the past, the featured image was a single image, added and managed separately from the rest of the post content. For block-based sites however, that restriction is largely unnecessary. Rather than just an image, we should consider making it possible to set a video or audio embed as the "Featured" block. Also, since posts are made up of structured data, it's theoretically possible to signify any block from within post content as a "Featured" block.

A couple possible use cases:

mtias commented 3 years ago

Another thing to consider here are possible attributes of the featured media, like "focus point" if used as a background, or styles like "duotone" effect.

annezazu commented 3 years ago

Pulling in feedback from the second round of FSE Outreach Program testing that relates to re-imagining this as the current placeholder flow having people upload images is bit awkward:

To me, I feel strange to be told to upload a featured image for each post here. I assume if each featured image are set, then this uploader won’t be shown. Still, I think it feels confusing. We should either: show some kind of placeholder to say this post has no image set as featured image; or, leave as is, but change the text to be more clear, and say no featured image is displayed because it is not set on the individual post. And that it will look better if you set them. Or notify about default image?

aristath commented 3 years ago

It's important to keep in mind that the featured image is not that important for the post itself... It's important for archives where the post is shown. A news site for example needs featured images in articles/posts because that's what gets pulled to show the articles on the frontpage.

beafialho commented 3 years ago

Rather than just an image, we should consider making it possible to set a video or audio embed as the "Featured" block.

Wanted to +1 here and give the example of a new theme we're designing where this would be a vital feature. Since this theme is aimed at videographers, it would contain galleries of videos and videos as featured images, displayed differently (as a full width background carousel, as a list of posts, mosaic grid, etc) as shown in the images below.

In this context, where a post would be a project, the featured image would be the core content. It would be useful as well to be able to add videos on the Query Loop, Latest Posts or Gallery block. Perhaps, if they were "featured videos" it would be more intuitive.

Video Theme 1 Video Theme 5 Post Page 3

megphillips91 commented 2 years ago

For journalism as a use case

There are quite a few content creators particularly those in journalistic roles who may have an established, efficient workflow that involves composing text only articles and placing just one image into the featured image. If that is my workflow, I am relying on the theme (in this case the page template) to do something with the featured image that does not require me to format the image before uploading it. The goal in these workflows is speed...and whitespace to write well while not being bothered with page design or layout.

So, as a site builder of this type of theme/platform, at the moment (5.9) I could disable the featured image, create a block pattern that visually achieves the same effect, and write some code that will set that first cover into the featured image in the background. Because for journalistic outcomes, we need to respect the data integrity which likely feeds interoperability within the rest api to news aggregators, search results, etc that specifically rely on a designated featured image (vs. video vs quote or whatever).

A solution

"Also, since posts are made up of structured data, it's theoretically possible to signify any block from within post content as a "Featured" block". I really love that idea, but I do not think the featured block can replace the featured image for journalism. However, if the theme author can constrain the 'feature this block' functionality to only certain blocks, this is an ideal solution.

example for cover block

kjellr commented 2 years ago

One more featured image enhancement suggestion, as raised in a support forum thread:

jasmussen commented 2 years ago

Here's a mockup showing how featured image could become more of a data source than a piece of media. Just select "Featured Image" in the "Replace" dropdown:

Set Media   Text as featured image

The descriptive text in the dropdown could be improved. We might even add separation between media and "Data sources" if we find it necessary to add additional data sources, such as "First attached image" or something in that vein.

If no featured image is set, you could get the same appearance in the placeholder as you get when you insert the Featured Image block on its own:

When no featured image is set
cbirdsong commented 2 years ago

I like how that looks, though I think it would be best if this system was able to accommodate more than just the featured image. I would love to easily be able to pull any kind of post/site metadata into a block. (see #37753)

jasmussen commented 2 years ago

Nice, I did consider other data sources as I as exploring, though didn't share as it didn't feel intuitive enough:

Screenshot 2022-02-17 at 08 44 12

The 6.0 preliminary road map suggests:

Explore the viability of inline tokens. This has come up repeatedly in the context of rendering dynamic strings (such as current date) in rich text blocks.

Do you think inline tokens (see also #21932) might play a role here? Ostensibly the dropdown shown above could contain other tokens for insertion as the URL.

draganescu commented 2 years ago

@jasmussen wouldn't a block transform from image to feature image do better than placing the option in the replace dropdown? It's more hidden but also more consistent IMO.

jasmussen commented 2 years ago

The problem is that would require changes to the block itself. The idea of the mockup here is that "featured image" is just a URL token, rather than a block.

Sirjazzfeetz commented 7 months ago

To summarize a few points from above:


Featured!.. where & how?

There are several posts about 'Featured Image' being a confusing feature;

..contextual explanation has been suggested ( #30904 ), but inconsistent use of the feature due to lack of functional knowledge (as someone mentioned), isn't helped with the schism between post-content and sidebar-content (as another mentioned). WYSIWYG improvements are welcome, but it's worth bearing in mind that these are limited to page view; complexity compounds when a 'featured image' is used on other pages, perhaps in many places. The "strange" (as one person put it) command to a "set featured image" for each and every post can create confusion;

It's important to keep in mind that the featured image is not that important for the post itself... It's important for archives where the post is shown. A news site for example needs featured images in articles/posts because that's what gets pulled to show the articles on the frontpage.

Multimedia Support

in regards to the initial request;

It would be useful as well to be able to add videos on the Query Loop, Latest Posts or Gallery block

and another multimedia request;

Allow the use of video stills or generated thumbnails of pdfs, etc. media support.


Updates to Existing Feature

Several updates have been suggested specific to the existing 'Featured Image' feature - including features lost from classic transition?.. such as the ability to display image caption / credit ( #40946 ) ( #23408 ). Requests to expand it's support to other blocks ( #35221 ) are perhaps better implemented through the Block Bindings API ( #37753 ).

A popular visual example for Gutenberg integration being:

Image Image


Beyond multimedia, designs today mix multiple media and have multi-layered editable images, perhaps any section or collection of elements could be "featured" to generate an "image"? (it could be more than that).

colorful-tones commented 5 months ago

Hi folks, We are only one week away from the Beta 1 cut-off date for WordPress 6.6. This issue hasn’t seen any movement in a while, so we (the editor triage leads of the 6.6 release) have decided to remove it from the WordPress 6.6 Editor Tasks project board.

jasmussen commented 2 months ago

To revisit this, an opportunity is presenting itself. Here's the Image block toolbar:

Image

Here's the Cover block toolbar:

Image

Here's Site Logo:

Image

Here's Media & Text:

Image

All of those have a "Replace" dropdown menu in the toolbar. They are all about to have a "Reset" option there as well, and in their setup state (before you add an image), they're about to have an "Add media|image|logo" option. Some of those have "Use featured image". We just discussed moving these options into the media upload component itself (CC: @mamaduka). I wonder: can we simply add "Use featured image" to all of those, in the same spot?

Mamaduka commented 2 months ago

The option is already there. See #41476.

can we simply add "Use featured image" to all of those, in the same spot?

Displaying a featured image requires additional handling in the block edit component and its save function. The latter will need a PHP renderer.

jasmussen commented 2 months ago

Site Logo makes less sense. It's not there for Image block, which in past conversations revolved around there already being a separate "Featured Image" block. But I wouldn't mind that still existing as a neat template shortcut, but the Image block getting that option too; even now you can add a block binding to replace the image source, it seems reasonable to then also just let you bind it to the featured image in a convenient spot.

Coming back to this issue, it seems like the remaining issues revolve around the quality of life features we have for things like Cover (focal point, duotone, etc). Like this replace dropdown, this speaks to convergence across the media blocks; does Image need a focal point picker? One would certainly be useful when applying an aspect ratio. That might also intuitively offer a UI for it on the Featured Image block, which already has duotone.

Would a mockup consolidating the missing features across the media blocks be a reasonable way to unblock this and bring it home? CC: @WordPress/gutenberg-design

cbirdsong commented 2 months ago

How would choosing a focal point work if the source is dynamic? That seems very odd.

richtabor commented 2 months ago

I am increasingly mindful of keeping blocks (an associated experiences) simple.

Feels a tad complicated to essentially transform the block to a featured image—without a bi-directional behavior. Which then complicates both blocks a bit more :)

jasmussen commented 2 months ago

Just to clarify, you can already make the Image block dynamic using block bindings, like in this example:

https://github.com/user-attachments/assets/f192ed7a-ab68-4f87-b439-09274c2e7a5c

If you add to that an aspect ratio, say Square, that will be maintained even when the URL gets updated. The motivation for then adding focal point when an aspect ratio is applied, is that the dynamic source could potentially be portrait shape. And then, maybe, you'd like to ensure you always see photos from the top/center. Same motivation for needing a focal point on the Featured Image block.

I'd be happy to keep this simple, however. Does that mean we can close this issue?

creativecoder commented 2 months ago

Does that mean we can close this issue?

I don't think this issue should be closed yet. The issue description raises the general concept of featured content, not just the featured image or image blocks.

For example, we're currently missing the ability to use a video or audio recording as the featured content for a post--I think adding that would be a good step toward resolving the issue.

richtabor commented 2 months ago

For example, we're currently missing the ability to use a video or audio recording as the featured content for a post--I think adding that would be a good step toward resolving the issue.

There's not a concept of featured audio or featured video today, is there?

richtabor commented 2 months ago

the first image in the post is used as the featured image.

This has happened too.

creativecoder commented 2 months ago

There's not a concept of featured audio or featured video today, is there?

There are some plugins available, but nothing in core, afaik.

I think one of the things to explore is how to add featured content, and what kind of integration with the existing featured image is useful. Featured image (or post_thumbnail) is stored as post meta, referencing an attachment post. Would we do the same for featured audio and video files? Or expand further and allow promoting content from a specified block or blocks from a post? How would the theme define this? How would the user customize it, when desired?

For example, I could see a cover block from a single post being the featured content for that post, and the same cover block being used for that post in an archive template. How would we mark that as featured in the post and how would it be retrieved for the archive template? Do block bindings fit into this, at all?