We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Hi, I upgraded tinymcerte which is based on TinyMCE 4.5.7, so the caption feature 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 | MODX Ambassador
      website
      • 36816
      • 109 Posts
      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);
      • Thanks for your answer!

        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 | MODX Ambassador
          website
          • 42562
          • 1,145 Posts
          Yes there is certainly a built-in feature which we use all the time. There ought not to be a workaround for such a basic feature.
          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
            TinymceWrapper: Complete back/frontend content solution.
            Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
            5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
            • 50722
            • 35 Posts
            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.