WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 18 months ago

#6812 closed enhancement (fixed)

Image captions

Reported by: matt Owned by: azaozz
Milestone: 2.6 Priority: normal
Severity: normal Version: 2.5
Component: Administration Keywords: has-patch
Focuses: Cc:

Description

Once #6811 is in, a great enhancement to the unified image editor would be the ability to have a caption, and for that to be inserted in a standard easy-to-style way. Here's a great use of image captions:

http://politicalticker.blogs.cnn.com/

We already have a caption field, it's just a matter of exposing that data with the image, maybe shortcode style?

Attachments (9)

img-captions.patch (24.8 KB) - added by azaozz 6 years ago.
img-captions2.patch (2.0 KB) - added by azaozz 6 years ago.
img-captions3.patch (2.9 KB) - added by azaozz 6 years ago.
img_captions4.patch (14.2 KB) - added by azaozz 6 years ago.
img_captions5.patch (10.2 KB) - added by azaozz 6 years ago.
img_captions6.patch (11.4 KB) - added by azaozz 6 years ago.
disable-captions-support.patch (10.3 KB) - added by azaozz 6 years ago.
disable-captions-support.2.patch (17.7 KB) - added by azaozz 6 years ago.
img_captions7.patch (11.5 KB) - added by azaozz 6 years ago.

Download all attachments as: .zip

Change History (45)

comment:1 azaozz6 years ago

Have been thinking what's the best way to do this. Generally there seem to be four options:

  • Hard-coding the caption tags when the image is inserted. That seems like the

easiest/most compatible way. Will only need few lines of css added to wp_head(). Disadvantages: cannot be removed later without editing the posts, no backwards compatibility.

  • Filtering the content and adding them to each image. This will require a regexp filtering for the blog and similar js for TinyMCE. Advantages: backwards compatible, can be disabled. Disadvantages: the regexp have to run on each page load and may have to check image sizes (captions on thumbnail sized images don't look good). That could be problematic/quite slow when the image is hosted elsewhere and width/height are not set.
  • A combination of the above two. A shortcode can be added around the image tag when inserting the image, then either rendered or removed when displaying the post (or perhaps the whole image tag can be a shortcode). Still won't be backwards compatible, but display of captions could be enabled/disabled on demand.
  • The captions can be handled entirely with JavaScript. This seems the most flexible way. It would be backwards compatible and could be enabled/disabled at any time. Disadvantages: may conflict with some plugins that also use js to change the images (that is also a possibility for all methods).

Also think that we will need another checkbox in the miscellaneous settings to enable/disable the captions globally.

azaozz6 years ago

comment:2 azaozz6 years ago

  • Keywords has-patch added

Support for image captions, first run. Uses shortcode around the img tag for the caption's settings, so
<img/> or <a><img /></a>
becomes

[wp_caption]<a><img /></a>[/wp_caption]

This way seems most compatible and at the same time futureproof. Any king of tags can be generated while processing the shortcode, or if captions are not needed, the shortcode can be filtered out and the default tag(s) returned.

Currently the captions are rendered similarly to the gallery page:

<dl>
<dt><a><img /></a></dt>
<dd>caption text</dd>
</dl>

This is supported in both TinyMCE and on the blog. All images that have alt text (attachment excerpt) will have captions when inserted in the editor. Also while editing older posts, if the images are edited and have alt text, the caption will be added. To stop showing caption for an image, the caption text should be deleted while editing the image (with the new popup), or the shortcode can be deleted from the HTML editor.

comment:3 azaozz6 years ago

The basic styles for the captions are in the Default and the Classic themes' style.css files. The users would have to copy/paste them in their current theme's style.css, similarly to the alignment classes.

comment:4 ryan6 years ago

(In [8239]) Image captions from azaozz. see #6812

comment:5 ryan6 years ago

Sometimes I get the raw wp_caption code surrounding the image in the RTE.

comment:6 ryan6 years ago

Editing the image and clicking "Update" will sometimes fix it. FF3 on Mac OS.

azaozz6 years ago

comment:7 azaozz6 years ago

Fix for showing of raw shortcode in the editor: creates the caption HTML before inserting new image, rather than on TinyMCE cleanup.

azaozz6 years ago

comment:8 ryan6 years ago

(In [8245]) Image caption fixes from azaozz. see #6812

azaozz6 years ago

comment:9 azaozz6 years ago

This patch includes several fixes: captions are properly created in tables and in lists, all tags are properly removed when deleting a caption, the "align" buttons can be used to align the captions.

comment:10 ryan6 years ago

(In [8260]) Image caption fixes from azaozz: captions are properly created in tables and in lists, all tags are properly removed when deleting a caption, the align buttons can be used to align the captions. see #6812

azaozz6 years ago

comment:11 azaozz6 years ago

Fix for single and double quotes entered in the captions, also simplifies the HTML tags on the site, renames the css classes to use dashes.

comment:12 ryan6 years ago

(In [8289]) Use dash instead of underscore for CSS names. Props azaozz. see #6812

comment:13 ryan6 years ago

(In [8290]) Fix quotes in captions. Props azaozz. see #6812

comment:14 Otto426 years ago

Caption styles in the default theme are not correct. Dashes instead of underscores, that sort of thing.

comment:15 Otto426 years ago

Additional: My bad, I see that was intentional. Well, if you're going to use dashes, then you should probably make the shortcode actually produce them, because on trunk it's still making underscores and such.

comment:16 Otto426 years ago

Never mind. I'm a moron and forgot to update the wp-include directory.

azaozz6 years ago

comment:17 azaozz6 years ago

Fixes image resizing inside captions, adds edit alt field to the advanced tab.

comment:18 ryan6 years ago

(In [8307]) Fix image resizing inside captions, add edit alt field to the advanced tab. Props azaozz. see #6812

comment:19 azaozz6 years ago

Support for disabling captions. To disable, define the constant DISABLE_IMAGE_CAPTIONS as true:

define('DISABLE_IMAGE_CAPTIONS', true);

either in wp-config.php or in the theme's functions.php.

comment:20 matt6 years ago

That constant is complete bloat, and I don't think it's worth having in WP.

comment:21 azaozz6 years ago

Agree, renamed to CAPTIONS_OFF, also renamed the shortcode to "caption" (the old one is still registered for back compat).

comment:22 follow-up: Otto426 years ago

You don't need a constant to not display the captions. Just either don't use the shortcode or hide them using CSS.

Instead of a useless constant, simply make a checkbox for captions on/off on the image insertion screen.

comment:23 ryan6 years ago

This is so that themes that provide their own captioning can disable WP's.

comment:24 ryan6 years ago

(In [8313]) Rename wp_caption shortcode to caption. Allow themes to disable captioning. Use dashes instead of underscores in class names. Props azaozz. see #6812

comment:25 ryan6 years ago

Went with the patch to get the other changes. We change how disabling is done if need be.

comment:26 in reply to: ↑ 22 azaozz6 years ago

Replying to Otto42:

You don't need a constant to not display the captions. Just either don't use the shortcode or hide them using CSS.

Instead of a useless constant, simply make a checkbox for captions on/off on the image insertion screen.

It's very easy to stop displaying the captions on the blog. Registering an empty shortcode that returns the <img> tag would do it (the <img> tag is the content of the [caption] shortcode).

Not so easy to disable the adding of captions when inserting or editing an image in the editor though. Of course it can be done with another checkbox in the user's settings, or a checkbox/cookie from js, but that would make it harder for themes/plugins. They will have to support both states, disabled and enabled, as it would be an user setting.

comment:27 ryan6 years ago

(In [8321]) Denote CAPTIONS_OFF as temporary. see #6812

azaozz6 years ago

comment:28 azaozz6 years ago

Removes the disabling of captions, but leaves couple of hooks so a plugin can do it easily.

comment:29 ryan6 years ago

  • Milestone changed from 2.9 to 2.6
  • Resolution set to fixed
  • Status changed from new to closed

comment:30 azaozz6 years ago

(In [8358]) Removes the disabling of captions, but leaves couple of hooks so a plugin can do it easily. see #6812

comment:31 follow-up: Otto426 years ago

I don't even see why that filter hook for disable captions is necessary. You've already got a filter to replace the captions system entirely. So disabling captions is as easy as this:

function no_caption($deprecated, $attr, $content) { return $content; };
add_filter('img_caption_shortcode', 'no_caption', 10, 3);

Why have yet another useless filter hook?

comment:32 in reply to: ↑ 31 azaozz6 years ago

Replying to Otto42:

I don't even see why that filter hook for disable captions is necessary. You've already got a filter to replace the captions system entirely. So disabling captions is as easy as this:

function no_caption($deprecated, $attr, $content) { return $content; };
add_filter('img_caption_shortcode', 'no_caption', 10, 3);

Why have yet another useless filter hook?

That would stop the captions from displaying on the site, but not in the visual editor and the user will still be able to enter them.

comment:33 azaozz6 years ago

(In [8607]) Removes the disabling of captions, but leaves couple of hooks so a plugin can do it easily. For 2.6.1, see #6812

comment:34 tarasdi6 years ago

Does this fix the problem of using quotes in the title field when uploading images?

As described in bug 6414?

Taras

comment:35 follow-up: nacin18 months ago

In 22420:

Properly return new WP_Error objects. props bpetty. see #6812.

comment:36 in reply to: ↑ 35 bpetty18 months ago

Replying to nacin:

In 22420:

Properly return new WP_Error objects. props bpetty. see #6812.

Ignore that, it was actually for ticket #6821.

Note: See TracTickets for help on using tickets.