<![CDATA[ TinymceRTE how to enable caption for images? - My Forums]]> https://forums.modx.com/thread/?thread=102256 <![CDATA[TinymceRTE how to enable caption for images?]]> https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551029 https://www.tinymce.com/docs/plugins/image/#image_caption should be available.

I guess that I can't use it until also the plugin modximage is updated, right?

Do you know any workaround?

Thanks!]]>
tillilab May 22, 2017, 07:57 AM https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551029
<![CDATA[Re: TinymceRTE how to enable caption for images?]]> https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-553104 Quote from: donshakespeare at May 22, 2017, 09:09 PM
https://modx.com/extras/package/tinymcewrapper
@donshakespear I just discovered TinymceWrapper - bravo sir!!!

All I wanted was figure/figcaption without all the hack/hack/hack - shouldn't too much to ask for these html5 days, and your gizmo does a splendid and simple job of that. Thanks!

Now I'm just looking forward to discovering all the other stuff in the suite etc. This has made me smile I can tell you.]]>
powellian Aug 09, 2017, 06:34 PM https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-553104
<![CDATA[Re: TinymceRTE how to enable caption for images?]]> https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551063 https://www.tinymce.com/docs/plugins/image/#image_caption (read how to FULLY customize your RTE)

tinymce.init({
  ...
  image_caption: true, //turn it on
  //image_dimensions: false,
  //image_title: true,
  //images_upload_credentials: true,
  ...
});


https://modx.com/extras/package/tinymcewrapper]]>
donshakespeare May 22, 2017, 09:09 PM https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551063
<![CDATA[Re: TinymceRTE how to enable caption for images?]]> https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551042
It's for sure a good workaround, I was hoping to use the built-in caption feature because the client would like to use the "alt" for seo purpose and the caption to add the credits.
But if there isn't other solution I will proceed with your suggestion.

]]>
tillilab May 22, 2017, 01:28 PM https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551042
<![CDATA[Re: TinymceRTE how to enable caption for images?]]> https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551039 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);
]]>
clareoconsulting May 22, 2017, 12:18 PM https://forums.modx.com/thread/102256/tinymcerte-how-to-enable-caption-for-images#dis-post-551039