Wysiwyg-editor: Image with a caption

[Khrystyna]

Hello!

That's a common feature in newspapers to show caption below the image. I couldn't find a way to change html output for image upload feature. Image upload popup has input field for title. This title can be used for caption (even from semantic point of view, title should cover image purpose, so perhaps to omit new field you can use this data). Can be this handy? Or there is a way to handle this right now?..

Thanks for supporting and quick feedbacks! :)

[stefanneculai]

This feature is already on our list. The simple way to do it now would be to set a data-caption with the same value as title and then use an after property for image to display it.

[Khrystyna]

Great to hear you have it in your feature list :)
I also thought about this, but, as I found out, very few browsers (as far as I know, only Firefox) implement the :after CSS property for "img" tag.

[stefanneculai]

One of our customers created a plugin for that https://github.com/Streetwise-Media/Froala-Image-Caption

[Finesse]

Two years passed already and the feature is still not implemented. The given plugin doesn't work with the 2nd version. This is sad :(

[leelinde92]

Will this be implemented?

[stefanneculai]

Yes, it will be in the following months. Sorry to keep all you guys waiting.

[Faey2222]

Yes, it will be in the following months. Sorry to keep all you guys waiting.

Any update on this yet?

[Coedcoe]

Here's some hacky JS/CSS to use the images alt text and display that as an image caption

// Loops through all the images in the fr-view
$(".fr-view img").each(function() {
     // Checks if it is floating and wraps the image in a container with specific classes for the float position
     if($(this).hasClass('fr-fil')) {
        $(this).wrap("<div class='froala-img-container fl-left'></div>");
     } else if($(this).hasClass('fr-fir')) {
        $(this).wrap("<div class='froala-img-container fl-right'></div>");
     } else {
        $(this).wrap("<div class='froala-img-container'></div>");
     }

     // Sets the caption from the value of the images alt text, then appends that after the image
     var caption = $(this).attr("alt");
     $(this).after("<div class='froala-img-caption'><p>" + caption + "</p></div>");
});

SASS styles to make it look nice:

.froala-img-container {
   position: relative;

   &.fl-left {
     float: left;
   }

   &.fl-right {
     float: right;
   }
 }

 .froala-img-caption p {
   color: #777777;
   font-size: 12px;
   width: 250px;
   float: left;
   white-space: nowrap;
   text-overflow: ellipsis;
   display: block;
   overflow: hidden;
 }

Preview in action:

[stefanneculai]

Just a quick update here. The last commit is adding image caption feature.