WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#25295 closed enhancement (fixed)

Adding additional classes to image captions

Reported by: jpswade Owned by: helen
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.6.1
Component: Media Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (4)

25295.patch (841 bytes) - added by rhyswynne 7 years ago.
25295.2.patch (1.2 KB) - added by mcadwell 7 years ago.
DocBlock updated for new class attribute in caption shortcode.
25295.3.patch (1.2 KB) - added by mcadwell 7 years ago.
Remove tab spacing
25295.diff (1.2 KB) - added by helen 7 years ago.

Download all attachments as: .zip

Change History (19)

#1 @esmi
7 years ago

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

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

#2 @jpswade
7 years ago

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.

Last edited 7 years ago by jpswade (previous) (diff)

#3 @aubreypwd
7 years ago

  • Focuses ui added
  • Keywords needs-patch 2nd-opinion added
  • Type changed from feature request to defect (bug)

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.

#4 @aubreypwd
7 years ago

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.

#5 @DrewAPicture
7 years ago

  • Component changed from Editor to Media
  • Focuses ui removed
  • Keywords image caption classes 2nd-opinion removed
  • Type changed from defect (bug) to enhancement

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?

#6 follow-up: @nacin
7 years ago

  • Milestone changed from Awaiting Review to 3.9

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.

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.


7 years ago

#8 in reply to: ↑ 6 @aubreypwd
7 years ago

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
7 years ago

#9 @rhyswynne
7 years ago

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.

#10 @nacin
7 years ago

  • Keywords has-patch commit added; needs-patch removed

I could go for 25295.patch, thanks rhyswynne!

@mcadwell
7 years ago

DocBlock updated for new class attribute in caption shortcode.

#11 @mcadwell
7 years ago

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

@mcadwell
7 years ago

Remove tab spacing

#12 @DrewAPicture
7 years ago

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

This ticket was mentioned in IRC in #wordpress-dev by helen. View the logs.


7 years ago

@helen
7 years ago

#14 @helen
7 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 27404:

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

#15 @jpswade
6 years ago

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.

Last edited 6 years ago by jpswade (previous) (diff)
Note: See TracTickets for help on using tickets.