silverstripe
Editing images with captions limitations
This is using the current version 3.1.11. I have created an image with a caption and added it to the page.
- Editing the caption text is fine (inside tinymce directly) but when I go to edit the image by clicking 'edit media', the caption text doesn't appear.
- I cannot remove the caption holder around the image and caption very easily, have to do it in the HTML which is frustrating and shows a limitation e.g. If I click on the image and delete it, I only delete the selected image, not the caption and caption holder.
- The caption holder seems to add style="width: ###.px" which isn't very responsive, is this necessary?
This is still an issue in 3.1.13.
Additionally, if you use the image handles to resize an image with a caption in the WYSIWYG, the image gets updated, but the new width doesn't bubble up to the wrapper div, causing problems with whitespace and/or overlapping images and text.
From memory I couldn't find a neat way to solve this. I had to override a lot of entwine javascript code in a way that was project specific. It might be worth revisiting with the new version of TinyMCE in the 4.0 alpha, but I haven't had a chance to look at the latest version just yet.
Tested with tinymce 4.0:
- This issue seems fixed. If you select an image with a caption and click the media button, you can edit the caption.
- Still an issue, but maybe one we live with?
- Can be fixed by deleting the
.css()from HtmlEditorField.js:
container.attr('class', 'captionImage '+attrs['class']).css('width', attrs.width);
As well as the issue with deleting a captioned image (which is very frustrating as it's not always easy to cleanly delete the left over caption) captioned images can be easily broken when:
- Changing the size of an image (when using a "...with text wrapping around" alignment)
- Changing the alignment of an image (e.g. from "on the left, on it's own" to "on the left, with text wrapping around")
- Trying to move the position of a captioned image within the content, by drag & drop.
(All reproduced in 4.0.0-alpha1)
I've purposely hidden the Caption text field in SilverStripe 3, as clients were ending up messing up many pages when trying to adjust captioned images.
At the very least I think that functions that will result in breaking the captioned image layout should be automatically disabled.
(All reproduced in 4.0.0-alpha1)
Please can you test against the master branch, a lot has changed since alpha 1
Just to confirm, I've reproduced the issues I reported above in 4.0.0-alpha2.
On a more general note, I'm keen to phase out these kind of advanced media insertion utilities in favour of content blocks - which will prove a much more robust way to handle complex content structures like "image plus caption". For now, I'm removing this from the 4.0.0 milestone
