Wysiwyg-editor: [Feature proposal] Image caption

Created on 10 Mar 2017  Â·  13Comments  Â·  Source: froala/wysiwyg-editor

Due to my work related's task I had to extend image capabilities to be able to add image caption.
So far I belive that I am able to do that and cover most of the side effects that occur.

So to my question, how do I hand off this change to Froala team so that they can take a look and, if possible, fix any oversight and integrate it into the official plugin?

Ex:
image

image

Most helpful comment

Hi Froala, thanks a lot for adding image caption support, however, I am wondering why you did not opt to use a more semantic HTML specification for the elements. For example (using the demo on the website)

<p style="text-align: center;">
    <span class="fr-img-caption fr-fir fr-dii" style="undefined">
        <span class="fr-img-wrap" style="width: 200px;">
            <img width="200" src="https://cdn0.froala.com/assets/editor/pages/B/editor-photo-645d411798e5b4e825765d091dd5aaab.jpg" alt="Editor photo">
            <span class="fr-inner">This is a caption</span>
        </span>
     </span>
</p>

It seems to me that this should have been done by using the figure and figcaption semantic elements, instead of awkwardly using span for everything. For example, something like:

<p style="text-align: center;">
    <figure class="fr-img-caption fr-fir fr-dii">
        <img width="200" src="https://cdn0.froala.com/assets/editor/pages/B/editor-photo-645d411798e5b4e825765d091dd5aaab.jpg" alt="Editor photo">
        <figcaption class="fr-inner fr-caption">This is a caption</figcaption>
    </figure>
</p>

Do you have some intuition for why relying on <span> instead of more semantic elements is the best way to go?

Thanks,
Andrew

All 13 comments

Thank you for the suggestion. Image figure is on our TODO list already. We do not keep feature requests here on Github, therefore I am closing it for now.

Oh that is great to know it is on TODO list. Is it possible to tell when this feature is available?

We don't have an ETA for it at this moment.

@pkhruasu-ui would you mind sharing your work? I'm looking to build similar functionality, thanks!

@Floriskoch here is the file. It is v2.4.2.
froala-image-caption-2-4-2.txt

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

Perfect. Thanks so much for letting use know. How do we add it?

Just update to version 2.7.0 and you'll find it in the Image Edit popup. There is also a demo on our website: https://www.froala.com/wysiwyg-editor.

Perfect. Many thanks and great jobs!!

On Tue, Sep 19, 2017 at 12:31 AM, Stefan Neculai notifications@github.com
wrote:

Just update to version 2.7.0 and you'll find it in the Image Edit popup.
There is also a demo on our website: https://www.froala.com/wysiwyg-editor
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/froala/wysiwyg-editor/issues/1828#issuecomment-330454692,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF_fTaAUn1krZv90uFMrK1YS9s9EVq3cks5sj23hgaJpZM4MZtja
.

Hi Froala, thanks a lot for adding image caption support, however, I am wondering why you did not opt to use a more semantic HTML specification for the elements. For example (using the demo on the website)

<p style="text-align: center;">
    <span class="fr-img-caption fr-fir fr-dii" style="undefined">
        <span class="fr-img-wrap" style="width: 200px;">
            <img width="200" src="https://cdn0.froala.com/assets/editor/pages/B/editor-photo-645d411798e5b4e825765d091dd5aaab.jpg" alt="Editor photo">
            <span class="fr-inner">This is a caption</span>
        </span>
     </span>
</p>

It seems to me that this should have been done by using the figure and figcaption semantic elements, instead of awkwardly using span for everything. For example, something like:

<p style="text-align: center;">
    <figure class="fr-img-caption fr-fir fr-dii">
        <img width="200" src="https://cdn0.froala.com/assets/editor/pages/B/editor-photo-645d411798e5b4e825765d091dd5aaab.jpg" alt="Editor photo">
        <figcaption class="fr-inner fr-caption">This is a caption</figcaption>
    </figure>
</p>

Do you have some intuition for why relying on <span> instead of more semantic elements is the best way to go?

Thanks,
Andrew

Sure, @aaclayton. Using span instead of figure is quite a debated topic, both internally and among Froala Editor users. Please check out issue #2206 for more details.

Hi @dianaprajescu, thanks for the link, was informative. I understand having read the related ticket why the span decision was made, and I'm glad to hear that <figure> support will be considered for a future major version.

One possible approach might be to add a configuration option to the image plugin that would allow the user to chose their caption style without forcing existing users into the change. Obviously, adding conditional support increases code complexity, but it might be a good way to collect more data before making a final decision.

Any update on this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bnjmnfnk picture bnjmnfnk  Â·  4Comments

adilsonb picture adilsonb  Â·  3Comments

homoky picture homoky  Â·  3Comments

Krisell picture Krisell  Â·  3Comments

lohiaad picture lohiaad  Â·  4Comments