Adding additional classes to image captions

[jpswade]

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

A user may wish to add a class (eg: caption-green or caption-red) to change the style of a specific caption or set of captions on a page.

Users find the "text" tab confusing so are reluctant to use this to manually make these changes.

The reason why I've escalated this to a feature request, rather than an arbitrary hack or plugin is this; for the end user, its frustrating that you can set additional classes on the image and link, but not the caption itself.

[esmi]

Why can't this be handled using pure CSS and the existing classes and ids - such as:

#attachment_1628 .wp-caption-text {
color:red;
}

[jpswade]

This [esmi's] solution only serves a per attachment case.

The class HTML attribute provides a way of classifying similar elements.

It would not be sane to think the end user would want to add a new line of CSS for every single image they attach.

Besides all this, 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.

[aubreypwd]

I'm also experiencing this issue often. I got frustrated and started searching for tickets. I may actually work on this and see if we can fix it for >= 3.9. This should also be a bug because if you can type classes in the area, they should save or it should be disabled.

I'd like to see what @azaozz thinks.

[aubreypwd]

Why can't this be handled using pure CSS and the existing classes and ids - such as:
#attachment_1628 .wp-caption-text {
color:red;
}

---

@esmi, my case also involves adding a class .aligntop to my captioned image and it won't add the class when I save. I want to, specifically, override the margin: 10px 10px 10px 10px; to margin: 0px 10px 10px 10px; so that images on the top of a page doesn't have a top-margin.

[DrewAPicture]

This seems very edge to me, and an excellent candidate for plugin material. That said, another filter in the caption shortcode callback would probably be in order to facilitate this.

And as it happens, the alignment class is already being added to output so reconfiguring that to evaluate through a filter could easily make it possible for new classes to be introduced.

Would somebody like to explore a patch?

[nacin]

Of note, the old "Advanced Settings" / "Edit Image" thing is now gone in 3.9, with the media manager doing the lift now. Even then, I don't think we should mess with UI for this, for the moment. I think it would make a fine Advanced Image Editing HTML whatever plugin, in part to replace some of the functionality we lost in the dialog. (It's possible we could sneak in a secret advanced pane, but I don't think it's a priority.)

That said, the shortcode could likely be improved a little. The "align" shortcode attribute is injected directly into the "class" HTML attribute. It would be better if we added a "class" shortcode attribute, that way "align" didn't need to be overloaded. It would also make it easier for plugins (in both JS and PHP) to detect the desired alignment, as "align" wouldn't necessarily get mucked up.

[aubreypwd]

Replying to nacin:

That said, the shortcode could likely be improved a little. The "align" shortcode attribute is injected directly into the "class" HTML attribute. It would be better if we added a "class" shortcode attribute, that way "align" didn't need to be overloaded. It would also make it easier for plugins (in both JS and PHP) to detect the desired alignment, as "align" wouldn't necessarily get mucked up.

Guess I'm not sure about this part? Shortcode? There's a shortcode for this?

Of note, the old "Advanced Settings" / "Edit Image" thing is now gone in 3.9, with the media manager doing the lift now. Even then, I don't think we should mess with UI for this, for the moment. I think it would make a fine Advanced Image Editing HTML whatever plugin, in part to replace some of the functionality we lost in the dialog. (It's possible we could sneak in a secret advanced pane, but I don't think it's a priority.)

I did notice this. It looks like there is no longer anyway to add classes to images, etc. Are there going to be ways to edit caption or alt text at a post/page level or does it *have* to use what's set in the Media Library?

I don't think the advanced tab really had a place in the dialog anyways. It was nice for me, but I think users rarely used it. I would rather see something where users could change the margins and padding on the images using checkboxes or something: ​https://cloudup.com/cmKb1vSkxrl

@DrewAPicture: This seems very edge to me, and an excellent candidate for plugin material.

If there isn't going to be a way to edit an images styles or classnames anymore, yeah. Maybe something to work on instead.

[rhyswynne]

As a learning experiment for me and getting me contributing, I wrote a patch for this that adds the "class" attribute to the [caption] shortcode. This is added along with the align attribute at the end (so the structure is class="wp-caption [align attribute] [class attribute]").

Hopefully this is a good starting block for somebody.

[nacin]

I could go for 25295.patch​, thanks rhyswynne!

[mcadwell]

DocBlock updated for new class attribute in caption shortcode.

[mcadwell]

Hey rhyswynne, Nice Patch! Just updating the doc block for the new class att.

[mcadwell]

Remove tab spacing

[DrewAPicture]

25295.3.patch​ looks good to me. Nice catch on the docs update!

[helen]

In 27404:

Add a class attribute to the caption shortcode to allow for additional classes on the caption container. props rhyswynne, mcadwell. fixes #25295.

[jpswade]

Original issue was:

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

Follow up to this issue here: #28997.