1. Images in posts should have the ability to have captions.
2. WYSIWYG: When the image is floated left/right, the caption should move along with it.
3. WYSIWYG: The user should be able to click the caption and start typing in it.
4. Drupal themers should have the ability to override the styling of the caption. The caption should look identical both inside and outside the WYSIWYG.
5. When the permission to have captions is removed from the text format being used, the images should still be displayed (and floated), just the caption should be missing.

At the Aloha Editor + Spark sprint, we implemented points 1, 2, 3 (bug fixes still needed), 4 (partially: the AE plug-in supports it already, we still need to leverage it), 5 (partially: the AE plug-in stores the caption in a data- attribute).

This will be implemented as part of #1702254: [Meta] As a content editor, I want to be able to caption images and align them through the WYSIWYG toolbar.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Wim Leers’s picture

Note that this is blocked on #1701618: Range errors when using CaptionedImage plug-in . In fact, it's better to merge that issue with this one.

So: Range errors when using CaptionedImage plug-in.
Reported to AE over at https://github.com/alohaeditor/Aloha-Editor/issues/618.

Note that this effectively makes it impossible to create image captions.

Floating images left/right does work, albeit annoyingly: each time you float it left/right/none, the selection is lost (i.e. the Aloha Block is no longer selected). This may or may not be related to the bug above.
(This happens with both AE's default UI and our custom UI, so it's not a problem on our end.)

Wim Leers’s picture

The Aloha Editor folks are working on #1.

I've been working on the server-side aspect of this: a Drupal input filter to render captions. Since we're basing all of this on quicksketch's DrupalCon London talk and #1605412-3: Brainstorm: provide WYSIWYG [filter compatibility] and only store the proper, "pre-transform" mark-up, that's the direction I went in.
Basically, I started from the data-attributes angle, looked at http://drupal.org/project/caption_filter's code (also updated/maintained by quicksketch) and reincorporated as much of caption_filter as possible (including the exact same CSS and exact same mark-up).

Maybe it makes sense to make this into a new, stand-alone project? Or to build it as the 2.x branch of the existing Caption Filter module? There will need to be some integration with Aloha Editor, but the goal is to keep that code as minimal as possible. In any case, this is also usable without any WYSIWYG editor, and it's arguably an implementation that is more in the HTML5 spirit.

My implementation:
- http://drupalcode.org/project/edit.git/commit/0817c56
- http://drupalcode.org/project/edit.git/commit/727cdd5
- http://drupalcode.org/project/edit.git/commit/0d8b078

I'm currently working on making this work well with Aloha Editor's CaptionedImage plug-in.

RobW’s picture

So this works by storing the caption in a data attribute while in the wysiwyg, and then outputting with a template file when saved?

Wim Leers’s picture

#3: Correct :)

I just patched Image Resize Filter to make it compatible with data- attributes: #1708366: Breaks data- attributes. Also referenced over at #1637486-7: Drupal core + contrib patches overview.

RobW’s picture

Nice! I was worried that it might be using js on both ends, but this is perfect.

Wim Leers’s picture

Excellent :) Would you be interested in testing this when it's ready?

babbage’s picture

I'll be willing to test it. :)

Wim Leers’s picture

Excellent! :)

Wim Leers’s picture

Still working on this.

While working on it, discovered another bug: https://github.com/alohaeditor/Aloha-Editor/issues/637.

Wim Leers’s picture

All my changes to the CaptionedImage plug-in of Aloha Editor are now ready; it works well on my local computer. At least, in so far as the CaptionedImage plug-in *works*: there are a lot of focus issues that make it impossible to test this properly.

What *is* working properly now: it cleans up correctly after itself, it can use Drupal-provided caption rendering functions and it's now smart enough to absorb the margins of the caption, and show those outside of the Aloha Block instead, so that you get a view that's as realistic as possible.

I've attached a few screenshots to give you an idea.

Currently, I'm awaiting bugfixes on Aloha's end to make this *really* work.

Wim Leers’s picture

#10: the changes have been merged, as also mentioned at #1697690-1: Aloha Editor contributions.

In that same comment, I also mentioned https://github.com/alohaeditor/Aloha-Editor/pull/642, which is necessary for a "content changed" event to be fired whenever a user changes an Aloha Block attribute, which is what happens when you change the alignment or the caption of a captioned image.

Further, #1715216: Necessary to re-render a "processed text" field without transformation filters whenever doing WYSIWYG editing is also necessary for all of this to come together, as well as #1715224: Use Aloha Editor's 'smart-content-changed' event to detect changes.

Wim Leers’s picture

Status: Reviewed & tested by the community » Active

So, with #1715216: Necessary to re-render a "processed text" field without transformation filters whenever doing WYSIWYG editing and #1715224: Use Aloha Editor's 'smart-content-changed' event to detect changes being fixed and the following two commits of late last week:
- http://drupalcode.org/project/edit.git/commitdiff/727b5b2
- http://drupalcode.org/project/edit.git/commitdiff/e8c0914
- http://drupalcode.org/project/edit.git/commitdiff/3b6ff1e
- They broke the custom UI API over at https://github.com/alohaeditor/Aloha-Editor/commit/ff0bef2b5cf53140bff74.... I fixed it in http://drupalcode.org/project/edit.git/commitdiff/4526e14.

This issue is now "fixed" from a Drupal POV.

Last Friday, over at https://github.com/alohaeditor/Aloha-Editor/commit/22582bcd632c06510efbd..., the Captioned Image AE plug-in has been changed to reuse any existing text alignment buttons in lieu of new buttons whenever they're available. Hurray! :)

Note that the following things still need to happen on the Aloha Editor side:
- https://github.com/alohaeditor/Aloha-Editor/pull/642
- https://github.com/alohaeditor/Aloha-Editor/pull/643 (The merge of the pull request mentioned in #10 was done incorrectly; this one fixes that.)
- a bunch of Aloha Editor bugfixes that prevent the CaptionedImage Aloha Editor plug-in from working well. Most notably, this is what prevents you from typing in the caption. You'll only be able to change alignment at the moment.

Wim Leers’s picture

Status: Active » Reviewed & tested by the community

Because I can't really mark it "fixed" because of the outstanding AE issues, let's mark it RTBC :)

Wim Leers’s picture

Wim Leers’s picture

Fixes confirmed for:
- "Captioned Image: impossible to (reliably) give focus to the caption" — https://github.com/alohaeditor/Aloha-Editor/issues/649
- "Captioned Image: change alignment => focus lost" — https://github.com/alohaeditor/Aloha-Editor/issues/647
- "Toolbar hidden whenever Captioned Image is selected" — https://github.com/alohaeditor/Aloha-Editor/issues/657
- "Leaking dependencies" — https://github.com/alohaeditor/Aloha-Editor/issues/655
- "alohaeditor-min" build?" — https://github.com/alohaeditor/Aloha-Editor/issues/656
- "Toolbar hidden whenever Captioned Image is selected" — https://github.com/alohaeditor/Aloha-Editor/issues/657

Fixes NOT confirmed for:
- "Captioned Image: alignment indication is wrong" — https://github.com/alohaeditor/Aloha-Editor/issues/648
- "Captioned Image: copy/pasted captions should have all their formatting stripped" — https://github.com/alohaeditor/Aloha-Editor/issues/651: only partially fixed
- "Captioned Image: formatting buttons should be disabled when editing caption" — https://github.com/alohaeditor/Aloha-Editor/issues/650: was "fixed" by hiding the toolbar, but that 1) can break down with custom UIs, 2) is not a real solution, because that won't work in cases where we do allow formatting in captions.

Fixed, but follow-up questions:
- https://github.com/alohaeditor/Aloha-Editor/issues/652 & https://github.com/alohaeditor/Aloha-Editor/issues/654

Wim Leers’s picture

A commit to update Captioned Image's configuration: http://drupalcode.org/project/edit.git/commit/8feccea

Wim Leers’s picture

The best way to experience Aloha Editor's Captioned Images (plus our custom UI) right now (until 0.21.2 is out) is:
- git clone AE into sites/all/libraries/alohaeditor (or profiles/spark/libraries/alohaeditor if you're using Spark)
- apply https://github.com/alohaeditor/Aloha-Editor/commit/7f30e0419d3cf2b4039f9... (ability to focus on captions)
- apply https://github.com/alohaeditor/Aloha-Editor/pull/680.patch (fixes incompatibility with our custom UI)

Wim Leers’s picture

An interesting bug was found yesterday: by preventing users from creating paragraphs of text inside captions, the AE developers accidentally prevented the user of enter/return keys *anywhere* in an editable, due to a bug in AE. Reported at https://github.com/alohaeditor/Aloha-Editor/issues/684.

Fix available at https://github.com/alohaeditor/Aloha-Editor/pull/688.

#17 should also use https://github.com/alohaeditor/Aloha-Editor/pull/688.patch.

Wim Leers’s picture

Project: Edit » Aloha Editor
Version: 7.x-1.x-dev » 8.x-2.x-dev
Status: Reviewed & tested by the community » Closed (fixed)

The scope of this issue was implemented. To track the (many) further refinements, please see #1782372: Kick-ass image support: integration for AE's Image + CaptionedImage plug-ins.

Wim Leers’s picture

Issue summary: View changes

Referenced #1702254.