Quote from: tillilab at May 22, 2017, 07:57 AM
Do you know any workaround?
I've done it in the past with a bit of front-end JS that fires on document ready. Here's a bit of (jQuery dependent -- although it could be refactored to do with plain JS) code that could suit. If you have lots and lots of images that need to be captioned, it might not be the best way to go, but with just a couple, it should be OK for front-end performance with minimal impact from screen repaints as captions appear.
It selects images based on a class such as
.accentImageCaptioned, that you can add to an image with most any version of TinyMCE. When run, it wraps selected images in a <figure> then grabs the image's alt text (again from most any version of TinyMCE) and makes that into a <figcaption>.
// Function (jQuery dependent) to wrap images (subject to selector)
// with <figure> and insert <figcaption> with image's alt text content
function addImageCaptions(selector) {
var $captionedImages = $(selector);
$captionedImages.wrap(function() {
$this = $(this);
var imgClasses = $this.attr('class');
$this.removeAttr('class');
return '<figure class="' + imgClasses + '"></figure>';
});
$captionedImages.each(function() {
$this = $(this);
$this.after('<figcaption>' + $this.attr('alt') + '</figcaption>');
});
}
// Define the image selectors
var imageCaptionSelector = '.accentImageLeftCaptioned, .accentImageRightCaptioned';
// Add the captions - run this after DOM is ready
addImageCaptions(imageCaptionSelector);
☆ A M B ☆
