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

Add option to set as feature image to image / cover block #13795

Closed
spacedmonkey opened this issue Feb 9, 2019 · 32 comments · Fixed by #39658
Closed

Add option to set as feature image to image / cover block #13795

spacedmonkey opened this issue Feb 9, 2019 · 32 comments · Fixed by #39658
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Image Affects the Image Block [Feature] Document Settings Document settings experience [Feature] Media Anything that impacts the experience of managing media Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement. [Type] Task Issues or PRs that have been broken down into an individual action to take

Comments

@spacedmonkey
Copy link
Member

When creating a post, there is a real disconnect between the content of the post and the elements in the sidebar. For this reason, I and am sure others, forget to set a featured image. Features images are useful for list pages like archives and for plugins like yoast to pick the image that best reflects the content. It feels odd that you could have a post with many images, in form of image, cover or gallery blocks and not the correct featured image.

Describe the solution you'd like
Add a button to the image / cover blocks, called "set as featured image". This is just a helper that sets the current image a feature image. It could also save data on block to say it is feature. This could help themes work on the current featured image and stop it being displayed twice at the top of a post.

Describe alternatives you've considered
Add a new feature image block, but this just feels like a copy of the current image / cover blocks.

@spacedmonkey spacedmonkey changed the title Add set as feature image to image / cover block Add option to set as feature image to image / cover block Feb 9, 2019
@swissspidy swissspidy added [Feature] Document Settings Document settings experience [Feature] Media Anything that impacts the experience of managing media [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Image Affects the Image Block labels Feb 15, 2019
@draganescu draganescu added the [Type] Enhancement A suggestion for improvement. label Apr 22, 2020
@draganescu
Copy link
Contributor

Yes, I second this idea, particularly because once I add an image, even if it is the only one i still have to add it again in the sidebar. A button to set featured image for image media blocks would be nice. I wonder if it could be something that blocks can opt into like provide featured image or something.

@paaljoachim
Copy link
Contributor

paaljoachim commented May 28, 2020

This is a very good idea!

Perhaps something like this:
Featured-image-image-blocks

Adding the Set featured image checkbox to the Image/Cover block.
The image will also need to automatically be added to the Document Featured Image section.

@spacedmonkey
Copy link
Member Author

In my head, I had a icon button in the toolbar next to the replace button.

@paaljoachim
Copy link
Contributor

paaljoachim commented May 28, 2020

The toolbar is used for the most important features and most used icons.
The sidebar are for the less used options.


EDIT:

Another example of the Image Block. I added the checkbox first and the Set featured image text after.
Image-Block-Set-featured-image

Here is an example in the Cover Block. Where I have added the Featured image checkbox on the bottom right.
Cover-Block-Set-featured-image


Another option I have not explored is adding it into the ellipse (3 dot menu drop down) menu for all Image and Cover Blocks. That would hide it further away though. Making it harder to discover.


NB. When a user clicks to use image as featured (Image Block or Cover Block) the image needs to automatically be inserted into the Featured image box in the Document settings.

@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 1, 2020

Here is another way complementary of automatically adding a featured image.
Notice the checkbox and text below the Featured Image box. It adds a general way to automatically add the first image as featured.
Perhaps there could be an option under document Options. So that it would be by default checked in the Options screen.

Auto-add-first-image-featured

EDIT:
We could actually have "Automatically add first image as featured." checkbox pre-checked.
As it would make the first image added to the document automatically added it to the "Set featured image" box. If the user forgets to add a featured image it will already be added because of the pre-checked checkbox.

If the user decides to add another image as featured then the "Automatically add first image as featured." checkbox would automatically become unchecked.

Auto-add-first-image-featured

@paaljoachim paaljoachim added the Needs Design Feedback Needs general design feedback. label Jun 1, 2020
@joyously
Copy link

joyously commented Jun 2, 2020

I don't agree that adding something to the blocks is the way to do this. Perhaps just enhancing the dialog you get when you click on the sidebar Set Featured Image, to include the images already in the post.
Making it part of the blocks sort of implies that they are related, when actually they are not, and the theme or plugins will do whatever they do with featured images separately from the block in the post. I can imagine that users might add an image, click your new little button, then change the image and presume that the featured image would change also.
Keep the content separate from the other attributes that describe the content (taxonomies, featured image, post meta, date, visibility, etc.)

@phpbits
Copy link
Contributor

phpbits commented Jun 2, 2020

Here's how my EditorsKit plugin is doing the "Set Image as Featured" on image block.

set-image-as-featured

@draganescu
Copy link
Contributor

I like @joyously 's proposal to enhance the main featured image sidebar control. Adding it to blocks is also nice since it is in the context: I am already having the image that I want selected. Maybe both should be explored.

I wonder if featured image is not a variation of the image block with the featured attribute set to on.

@mapk
Copy link
Contributor

mapk commented Jun 16, 2020

The proposal to quickly set an existing image in the post to become the feature image is understandable. Although, I too agree that I would not want them to become tied together in a way that might confuse the user.

Keeping these separate visually and interactively also keeps them separate conceptually. Listening for more feedback sounds good here, but I'm in favor of keeping these two interactions separate for now.

@mapk mapk added the [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later label Jun 16, 2020
@paaljoachim
Copy link
Contributor

paaljoachim commented Jun 16, 2020

I would suggest adding a checkbox below the existing "Set featured image" box that says something like: "Automatically set first image as featured". Having a checkbox there it becomes associated with the existing featured image box. Keeping the feature in one place.
#13795 (comment)

EDIT: It will be off by default. Leaving it up to the user to turn it on.

NB. I would suggest a code snippet to add to the functions file to automatically have the checkbox checked. http://www.indexwp.com/automatically-set-featured-image-wordpress/

@mapk
Copy link
Contributor

mapk commented Jun 16, 2020

That's not bad at all. It keeps the interaction tied to the featured image component. Maybe the wording can be adjusted to say... "Add the first image as featured."

@cathibosco
Copy link

cathibosco commented Jun 18, 2020

  1. I agree keeping the interaction tied to the featured image component is optimal.
  2. I also think it should stay on the document panel as well. If it were an option in the image block it would throw errors in the editor flow process a lot of the time since an error message is often thrown when an image is not the right size for default featured images.
  3. Screen Shot on 2020-06-18 at 07-49-25
  4. This setting could be a toggle on the document panel in the featured image component but it can cause issues for users in the archive page presentation or view with duplicate images depending on the layout of their pages/posts... so, for this reason, I do not think it should be "ON' by default.

I do not understand why the editor's kit example above does not show the error unless the image in that example is already sized perfectly for the featured image...

@paaljoachim
Copy link
Contributor

paaljoachim commented Mar 2, 2021

Adding some some other featured image issues as well that are associated.

Allow Post Featured Image blocks to have a consistent height
#27620

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

Allow using featured image as background for a group block
#24660

@altivero
Copy link

altivero commented Jun 4, 2021

Also associated:

Featured Image: Automation and improvements
#31849

@draganescu
Copy link
Contributor

I'll start exploring adding a toggle for the cover block that pulls the featured image if one is set.

@draganescu
Copy link
Contributor

Looking into this, considering the advancements we have had from the work on entities, it seems @jasmussen has a great point in solving this via the media replace flow component. It would automatically make the featured image available as a source for many blocks and it's also pretty intuitive as a workflow.

@jasmussen
Copy link
Contributor

We could also maybe start with it as part of the replace flow and then the URL can be tokenized later if it makes sense?

@draganescu
Copy link
Contributor

Some questions I stumbled upon while researching this:

  • do we want to copy the current featured image's URL or bind to the value of it, and update on change? The difference would be that if the featured image is changed, a user clicks update or the block auto-updates.
  • what happens when the block is rendered but some plugin for instance changed the featured image? Even if the user manually changes the featured image, will blocks auto update on the live website? I think this would require a lot blocks to be filtered on render to make sure we render the latest URL as src.
  • the user should be able to set the featured image from the placeholder (say for both cover and image blocks one option should be "Use featured image").

@draganescu draganescu linked a pull request Mar 13, 2022 that will close this issue
@jasmussen
Copy link
Contributor

CC: @dmsnell as I think you've been looking into some token stuff.

@mtias mtias added [Type] Task Issues or PRs that have been broken down into an individual action to take and removed [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later labels Mar 14, 2022
@dmsnell
Copy link
Member

dmsnell commented Mar 15, 2022

Thanks @jasmussen. While we don't have working code to my knowledge, the idea in proposal is that we can create a special URL or token of some kind that indicates the source of an image is "the featured image" of the post in context (could be on a page itself, could be the current post in a query loop).

This is opposite of my understanding of this PR, which is to instead say, "set the post's 'featured image' to be this particular image." This is conceptually much simpler.

@jasmussen
Copy link
Contributor

This is opposite of my understanding of this PR, which is to instead say, "set the post's 'featured image' to be this particular image." This is conceptually much simpler.

If this is simpler, would you mind if this one landed as a small improvement without the need for tokens?

I know I mentioned it initially, but after mulling it over, I have a feeling that tokens in URLs might make for a somewhat tricky UI, and that tokens for example in a date block might be more intuitive as a starting point:

[Postname] was published on [Date] and filed in [Category]

What do you think?

@paaljoachim
Copy link
Contributor

A thought....
Could we when adding the first image to the canvas automatically have it added as a featured image? Seen in the featured image box. This way a user would notice that the first image has been already set in the featured image box, and if they want to use another image they will replace the "default" featured image. As it can many times be easy to forget to set a featured image for a post or find it cumbersome to always manually have to add one.

@joyously
Copy link

[Postname] was published on [Date] and filed in [Category]

Cool! Going back to shortcodes? This really underscores the need to keep the content separate from the extra stuff that describes it, like taxonomies and featured image.
I don't think the featured image should be shown in the editor's content area, since the theme or plugin (even blocks) can do lots of different things with it dynamically.

@jasmussen
Copy link
Contributor

jasmussen commented Mar 16, 2022

Not so much shortcodes, as you wouldn't write them, you'd pick them from a list. I can't find the issue right now, but something like this:

Meta chips

@dmsnell
Copy link
Member

dmsnell commented Mar 16, 2022

If this is simpler, would you mind if this one landed as a small improvement without the need for tokens?

Not at all, if my understanding is correct. Specifically, that this feature request has nothing at all to do with tokens or indicating that when rendering, a given image should show the featured image for a post.

In my understanding this feature request is specific to the image and cover blocks and amounts to a shortcut function: "go ahead and set this one as the featured image for the post."

Could we when adding the first image to the canvas automatically have it added as a featured image?

Just my own two cents here: that seems like a double-edged sword since I think I've seen plugins and themes that use their own methods to pick a featured image (when none is already set). Maybe it's a good idea to force-choose a featured image 🤷‍♂️ - probably worth a different issue.

Also worth a different issue, while we're discussing it, is why not present a drop-down on the featured-image selector that not only lets you upload or pick an item from the media library, but shows a small thumbnail grid of all the images currently in the post. That could get the featured image picking closer to the task at hand. It would work well with a shortcut from the image block.

❓ How hard would it be to realize this feature request as an extension that we can apply to the block vs. hard-coding the behavior inside the block? Could we write out the behavior as a hook and inject the button into the block's inspector or toolbar?

@paaljoachim
Copy link
Contributor

As @draganescu made the PR for "Makes cover block dynamic and adds featured image binding" and went ahead and closed this issue. Is there something we should move over to a new issue that has not been dealt with here?

There is also this issue:
Fallback Featured Image
#32447
Which I believe is associated.

Both issues are closed but fallback featured image has not been dealt with yet, so that should be reopened. (Commenting there as well.)

@paaljoachim
Copy link
Contributor

paaljoachim commented May 8, 2022

We now have an icon in the Cover block which we can click to add the Cover block image as a featured image.

Screenshot 2022-05-08 at 13 08 28

We do not yet have this new feature (icon) added to the Image block.
Screenshot 2022-05-08 at 13 09 32

@draganescu Andrei. Let's get the same feature added to the Image block.
I will reopen this issue as one part is done but the other part (Image block) has not been done yet.

Regarding Featured images. Check out this article at WP Tavern:
https://wptavern.com/wordpress-should-support-featured-images-for-categories-users-and-more

@paaljoachim paaljoachim reopened this May 8, 2022
@noisysocks noisysocks removed the [Status] In Progress Tracking issues with work in progress label Jul 15, 2022
@noisysocks
Copy link
Member

Un-assigning @draganescu as I think this issue is waiting for someone to pick it up.

@jordesign
Copy link
Contributor

Just checking if we still need this given it is possible to insert a 'Featured Image' block?

@jasmussen
Copy link
Contributor

I don't know that it needs a separate issue, but there are some things we need to explore in 6.4 around connecting refrences. For starters it will mainly be colors (I want to use the text color for my background, and the background color for my text), but images may be a part of that as well. It needs a generic solution that would also work for plugin blocks, and media and text.

@draganescu
Copy link
Contributor

@jasmussen what exactly is left for this issue to be closed? #41704 seems to point to not wanting featured prop of image block. What else?

@jasmussen
Copy link
Contributor

I'm actually happy to close this issue, simply because its use case will likely be addressed by the ref/token system, and with 5000+ issues it's only good to consolidate!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Image Affects the Image Block [Feature] Document Settings Document settings experience [Feature] Media Anything that impacts the experience of managing media Needs Dev Ready for, and needs developer efforts [Type] Enhancement A suggestion for improvement. [Type] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet