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

Image block: allow for editing image title #11054

Closed
sarahmonster opened this issue Oct 25, 2018 · 13 comments · Fixed by #11070
Closed

Image block: allow for editing image title #11054

sarahmonster opened this issue Oct 25, 2018 · 13 comments · Fixed by #11070

Comments

@sarahmonster
Copy link
Member

@sarahmonster sarahmonster commented Oct 25, 2018

In #8291, there's some discussion around adding the ability to edit the image title directly in the editor. As it currently stands, in order to edit the image title, one needs to break their flow in order to loop over to the media library, then return back to the post.

From @bph:

We noticed a few support tickets where people would like to set a title for the image they uploaded via the image block. The sidebar doesn't have all the fields, they see in the current editor. The work around is right now, to save the draft, get out of the editing process, go to the media library look for the newly uploaded image and fill in the title. But even if that is done, the front end doesn't display the image title. It's an SEO relevant attribute for an image, if ranking their image in search result pages is important to the site owner

and @rosswintle:

+1 for @bph's title issue. Auto-generated media titles are derived from the file name, and no-one wants a media library full of things called "IMG0756" or "Screenshot 2018-09-04 10:20:30" because you can't then find anything in the media library.

I have to work really hard to get my clients to add titles so that when they search for images they can find media that they've added in the past easily.

I'd really like Gutenberg to put some emphasis on giving images titles as well as captions and alt-texts. The classic editor at least made this possible. Please make editing the title possible, as a minimum, and emphasise it if you can.

Sidebar settings for the image block already have a lot going on, so I'm wary about adding more noise here, but it sounds like this would be really useful to add in here—perhaps above the "alt text" section as a single-line input?

Vaguely related: #9350

@brentswisher

This comment has been minimized.

Copy link
Contributor

@brentswisher brentswisher commented Oct 25, 2018

I have added this to #11070 but in testing it I found a few issues I think might warrant further discussion, specifically:

  1. This attribute (like the alt) is defaulted from the media library, but does not overwrite it when changed in the editor. Based on #7193 this is the desired behavior, so adding title as an attribute won't satisfy @rosswintle's desire for more searchable images in a site's media.
  2. Since the default title is set to the file name, I am concerned that adding it here will result in a lot more titles being saved into the page's content with the default (ie: IMG_2323), given that the official HTML 5 spec has the following warning, I don't think that is a good thing :

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification

Probably a little atypical to submit a pull request as I say I don't think it's a good idea, but I thought it might give somewhere to start. @sarahmonster if you know who the relevant people to tag for these questions are, that would be much appreciated. 😄

@bph

This comment has been minimized.

Copy link
Contributor

@bph bph commented Oct 25, 2018

Each block has an advanced options space where the title could reside.
Seems we have some contradictory goals at work. Those who care about title care about for getting the images not only found in their own library but also by Search Engines Images search features. This is quite an edge case. In the other side the title is hardly used properly and gets in the way of overall accessibility for site visitors and is better not used (unless I am misreading stuff here) so not displaying it in the block's sidebar directly but tuck it away in the advanced section might do the trick...

@bmeacham

This comment has been minimized.

Copy link

@bmeacham bmeacham commented Nov 22, 2018

I too have encountered this issue. I added an image, and it showed up fine in the visual editor. I switched to the code editor and added a title attribute. When I switched back to visual editor it said "This block contains unexpected or invalid content." If I select Resolve, it offers to remove the title attribute. If I select Convert to HTML, the visual editor removes the image and displays the html instead. In either case, the image displays properly in Preview mode. That's OK, but it would be nice to see the image without the warning in the visual editor. Please add support for the title attribute in an element.

Putting the entry for the title attribute in the sidebar in the advanced section would be fine for my use case.

@KokkieH

This comment has been minimized.

Copy link

@KokkieH KokkieH commented Dec 11, 2018

I switched to the code editor and added a title attribute. When I switched back to visual editor it said "This block contains unexpected or invalid content."

This might not be the right issue for this, but it feels related - I'm able to replicate this behaviour when making any changes to the image block in HTML view, including adding additional classes in the class attribute, or adding an id attribute to the block.

@reneedobbs

This comment has been minimized.

Copy link

@reneedobbs reneedobbs commented Jan 17, 2019

The title tag is definitely used by businesses for SEO purposes, following the advice of Yoast, Search Engine Land, and countless other SEO companies.
The title tag is also the field Pinterest uses for the pin description when someone pins an image from a website when the data-pin-description tag is not there. Pinterest is one of the top traffic referrals for many businesses. That's another reason businesses use it - the alt-text is for describing the image and the title is for promoting it.
Note: The data-pin-description tag is also one not supported by the current Image block - gives the invalid content message.

@KokkieH

This comment has been minimized.

Copy link

@KokkieH KokkieH commented Jan 21, 2019

Another request for a title and description field in the WordPress.com forums.

@MyCancerChic

This comment has been minimized.

Copy link

@MyCancerChic MyCancerChic commented Feb 3, 2019

I would like to add to this issue with another request for an update. With the image alt attributes missing this is impacting the Yoast SEO and Pinterest, which is the major form of traffic for my blog MyCancerChic.com. When you go to a post now and try to pin the images, The text previously input into image alt attribute is missing. This is an issue when others save photos, pin to Pinterest or search for images. Is there a timeline for this being resolved?

@MyCancerChic

This comment has been minimized.

Copy link

@MyCancerChic MyCancerChic commented Feb 3, 2019

See screenshots below. The "Embryo Transfer" Pin shows the alt attributes, the second pulls the title since alt attribute is not available.
screen shot 2019-02-03 at 5 35 21 pm
screen shot 2019-02-03 at 5 34 05 pm

screen shot 2019-02-03 at 5 26 06 pm

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Feb 23, 2019

It's an SEO relevant attribute for an image

The title tag is definitely used by businesses for SEO purposes, following the advice of Yoast, Search Engine Land, and countless other SEO companies.

Not sure this is entirely true, and in most of the cases the title attribute is abused. Actually, Yoast discourages its usage. Maybe @jdevalk can shed some more light on this. See also this recent post:

Image SEO alt tag and title tag optimization
16 January 2019
https://yoast.com/image-seo-alt-tag-and-title-tag-optimization/

most of the time it doesn’t make sense to add it. They are only available to mouse (or other pointing devices) users and the only one case where the title attribute is required for accessibility is on <iframe> and tags.

If the information conveyed by the title attribute is relevant, consider making it available somewhere else, in plain text and if it’s not relevant, consider removing the title attribute entirely.

Instead, the alt attribute should always be considered as the actual content.

A different issue is the attachment title as used in WordPress in the media library. It totally makes sense it should be meaningful and easily searchable.

However, when creating content, the alt attribute should be prioritized to educate users that's the very important bit of information conveyed by images.

@reneedobbs

This comment has been minimized.

Copy link

@reneedobbs reneedobbs commented Feb 23, 2019

@afercia That must be an updated post from Yoast because it is definitely not the information/instructions given before. In fact, around the first of this month (February) I had an email conversation with a Yoast representative and asked them to revise their image SEO post because Gutenberg block editor no longer supports the title attribute. (My request was for them to update to show how to manually add it in Gutenberg).
The Yoast post before had instructions on how to add the title tag for added SEO benefits. <- And that advise is what businesses are following.

@afercia

This comment has been minimized.

Copy link
Contributor

@afercia afercia commented Feb 23, 2019

That must be an updated post from Yoast

@reneedobbs sure, the Yoast post has been updated. That's why I've specified the post date: 16 January 2019. That's the new recommendation from Yoast 🙂

I believe the previous wording was:

It can be useful but in most cases, leaving it out shouldn’t be too much of an issue.

Businesses should probably consider to follow the new recommendation.

As per the technical details, it's also important to consider that the attachment title and the title attribute are two very different things in WordPress, see my comment on the PR.

@rosswintle

This comment has been minimized.

Copy link
Contributor

@rosswintle rosswintle commented Feb 24, 2019

Just want to chip in here, as I've been mentioned.

The issue I was raising in #8291 was not to do with the HTML "title" attribute, but rather to do with the workflow of uploading images to the media library and giving them a title and description that is saved to the image in the media library.

This is still not fixed. And I still believe that people should be encouraged to set titles on uploaded images rather than end up with a bunch of images called things like "img0145" and "DSC002864" and "Screenshot 2019-02-24 at 08:34:29".

Thanks

@FinnJackson

This comment has been minimized.

Copy link

@FinnJackson FinnJackson commented May 22, 2019

Please restore 'Image Title Attribute' which has been lost in the Gutenberg editor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.