Adding additional classes to image captions via UI

[jpswade]

This is a follow-up to #25295.

In the "Advanced Settings" of an image, you can already set the classes of the image and the link, but not the caption.

Although you can now add a class to the caption manually under the "code" tab, there is no UI in the "Image Details/Advanced Options" of the image that actually allow you to add the class as you would expect.

The reason why I've escalated this to a feature request, rather than an arbitrary hack or plugin is this; for the end user, if you can add classes to the image and the link, you'd expect to be able to add classes for the caption, since this is a "caption" shortcode we're talking about here.

Although issue #25295 does now permit classes in the shortcode, it does not add a user interface.

[jpswade]

For clarification, as of 3.9 it's now called "ADVANCED OPTIONS" not "Advanced Settings".

As you can see there is an option to add an "Image CSS Class" and a "Link CSS Class", but not one for a "Caption CSS Class".

Changed to a bug as now that the [caption] shortcode accepts a class it is a missing feature.

[joemcgill]

Replying to jpswade:

At the risk of sounding redundant to the comments on #25295, the result you're looking for can be accomplished by adding a class to the image and using a CSS adjacent selector in your stylesheet to style captions based on the image class. So, for example, if you were to add a .red-caption class to the image, you could style the caption like this:

.red-text + .wp-caption-text { color: red; }

As many have suggested on the other ticket, I'm not sure it's worth adding extra UI for this particular case.

[jpswade]

joemcgill:

For developers, sure, CSS adjacent selectors are fine.

However, the end user, if they can add classes to the image and the link, then would expect to be able to add classes for the caption.

Issue #25295 adds the ability to pass a class to the shortcode, the problem we're trying to solve here is passing the class from the UI.

[asterbird]

CSS adjacent selectors apply to elements after the selected element. The figure element is before the img element, which makes renders CSS adjacent selectors irrelevant. See this topic about CSS's inability to directly select previous siblings: ​http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector/36118012#36118012

I too would like to see this bug fixed. I have several use cases and run into the issue of a lack of adequate classes on the Figure element for just about every website I build.