Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kjellr opened this issue Dec 9, 2020 · 24 comments
Open

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

kjellr opened this issue Dec 9, 2020 · 24 comments
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.

Comments

@kjellr
Copy link
Contributor

kjellr commented Dec 9, 2020

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:

  • A photo blog, where posts contain a single image. If no separate featured image exists, the first image in the post is used as the featured image.
  • A podcast site, where each post's "featured" block is audio of the podcast episode.
@kjellr kjellr added [Type] Enhancement A suggestion for improvement. [Block] Post Featured Image Affects the Post Featured Image Block [Type] Discussion For issues that are high-level and not yet ready to implement. labels Dec 9, 2020
@mtias
Copy link
Member

mtias commented Dec 17, 2020

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
Copy link
Contributor

annezazu commented Mar 8, 2021

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
Copy link
Member

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
Copy link

beafialho commented Sep 13, 2021

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
Copy link

megphillips91 commented Jan 24, 2022

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
Copy link
Contributor Author

kjellr commented Feb 8, 2022

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

  • The ability to add an external URL to use as a featured image.

@jasmussen
Copy link
Contributor

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
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link

Sirjazzfeetz commented Apr 7, 2024

To summarize a few points from above:

  • The ability to set any media block, or perhaps any block from post content, as "featured".

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
Copy link
Member

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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
Copy link

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

@richtabor
Copy link
Member

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
Copy link
Contributor

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

gb-19-block-bindings.mp4

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Member

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

This has happened too.

@creativecoder
Copy link
Contributor

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?

@jasmussen
Copy link
Contributor

Twenty Twenty-Five ships with a big featured image placeholder in the Page template. A new feature to "Show template" has also been added to the preview dropdown, which shows this in the regular page editor, and a followup PR explores making that choice persistent. Beyond the audio use case, it's possible I'm still missing some nuance as fara as moving forward on this one. After all, the featured image is used as opengraph thumbnail data in context of social sharing, I don't know that video or audio could ever fill that gap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Post Featured Image Affects the Post Featured Image Block [Type] Discussion For issues that are high-level and not yet ready to implement. [Type] Enhancement A suggestion for improvement.
Projects
Status: Now
Development

No branches or pull requests