Feature request: image alt text and titles

What’s the reason for not using the alt text entered in the media library? Wouldn’t it make more sense to use the alt text entered in the media library and use the alt text field in the builder as an override (perhaps also with dynamic content support)? Or perhaps remove it completely? Currently if we don’t enter alt text in the builder, there’s a default alt text of “Image”. That’s not very helpful.

And there’s also no way to currently show image titles. Could you add an on/off toggle for image titles?

2 Likes

While we use the media library to retrieve an image URL, it’s not actually referencing the attachment ID so it can’t automatically pull through the alt text. Something we might be able to do is automatically set the alt text once when you select an image, but you’d still be able to override it in the Inspector. I’ll make a note of looking into the possibility.

3 Likes

That would be great. Would it then also be possible to retrieve the title text and caption?

The idea is that when you click the insert button in the WP media modal that it would automatically update the Alt text to match what is in the library, all in one action. This would only happen if the alt text existed in the media library of course (it wouldn’t pull from the caption).

Would you expand this to title text and caption as well? With some added controls in the image element to enable/disable title text and caption output?

I’m not expecting it this cycle but it may be worth considering for a future update.

I agree that the Caption (<figure> + <figcaption>) would be a welcome addition to the next Image element iteration.

Along with SRCSET. Here is a quick mockup how it could be presented: :slight_smile:

Oh, plus a “Lazy Load” checkbox. That’d be nice.
In the fierce Page builders Competition, better native performance and SEO already play a huge role.

1 Like

While we are adding ‘stuff’ to the image element…

Can we also have a force full width… ie width = 100% of the page/container/column

at the moment to force full width I need to resort to the following

$el.x-image img {
  min-width: 100vw;
}

or similar

1 Like

@JvP, it’s unlikely we’d add a caption to the image control itself since that is used by many different elements. We could add captions to just the image element.

@Misho, Great idea reusing the breakpoint component we already have. We’ll keep that in mind. I’d like to start by trying to leverage the built in WordPress solutions for this. It would be nice if you only had to pick the full size image and it could automatically use the correct alternatives.

@scotbaston So you mean like adding a min-width control to the Image element similar to how it has a max-width option?

1 Like

Hi @alexander!

With the Wordpress native solution, it concerns me that some things don’t seem to be straight forward:

  1. Ability to set completely different image for mobile, or the same one with a different aspect ratio.
  2. Ability to easily set @2X image displayed at 50% size, per break point.
  3. Ability to only change the Mobile image, and use the second one for all larger sizes.

I guess that the possibility to choose between the automatic and the manual approach would be the ultimate solution. :slight_smile:

Yes, adding captions to just the image element is what I had in mind :slight_smile:

I agree with this. While Google can ignore the caption and use its own ways to describe the image in the Image search, Captions are still important for UX (when they make sense), and for the general SEO.

This page has the caption used for the author’s name: https://www.finecooking.com/article/carambola-a-fruit-shaped-like-a-star.

However, a search “Fruit that looks like a star” will generate the caption from the title. This will mostly happen for the image that is close(st) to the title.

Technically, I guess that for the image element, the best way is to have a toggle to insert the caption that first looks for the WP caption. If it exists, it pre-fills the field, but it can be changed. If not, then the user can add his own. Then the usual controls can apply, like the ones for the Citation in the Testimonial element.

Using <figure> and <figcaption> is recommended by Google, for Google Developers documentation, and anything that is recommended there, is valid anywhere. :slight_smile:

1 Like

I’ll add some notes about adding a caption to the image element itself. It could be off by default without effecting existing sites, and something you opt-in for. We’ll also talk through some of the advantages/tradeoffs of the automatic vs manual image sources.

1 Like

Thanks @alexander

Yeah, should be opt-in. You don’t want to show a caption in all cases. Could you implement the same for title text as well?

I’m not sure just yet how that will work. It is unlikely that we will add an actual title attribute. We’ll take some time to figure out the best approach for this feature after going over all the options.

1 Like

Bump :sunglasses:

1 Like

For the title or captions attribute? Number of features in this thread we could do, worth me saving this one.

3 Likes

Yeah, both the title and caption.

1 Like