You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#109500 Caption span Javascript

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Monday, 22 November 2021 09:54 GMT

Joris
When making use of the caption plugin, a little JCE JavaScript </components/com_jce/editor/tiny_mce/plugins/caption/editor_plugin.js> places a span element around the img with a lot of inline styling. I understand the need for this, but it clashes with our responsive images solution, without the possiblity to correct by template css. That's why I want to know if there is a way to use some kind of our own override script? Of course we can place our own script, but it will be overwritten with every update. In more detail: Original html-code:
<img src="https://www.joomlacontenteditor.net/image.jpg" alt="image" class="img-50" style="float: left;">
Caption code by JCE:
<span class="wf_caption" style="float: left; max-width: 800px; display: inline-block;" role="figure">
<img src="https://www.joomlacontenteditor.net/image.jpg" alt="image" class="img-50" style="float: none; width: 100%; margin: initial;" role="figure" width="800">
<span style="display: block;">Caption</span>
</span>
Our wish:
<span class="wf_caption img-50" style="float: left; display: inline-block;" role="figure">
<img src="https://www.joomlacontenteditor.net/image.jpg" alt="image" class="" style="float: none; width: 100%; margin: initial;" role="figure" >
<span style="display: block;">Caption</span>
</span>

Ryan
This is not currently possible, although I like the idea and have thought about implementing it at some point.

It would have to be with caption specific css classes though and not custom css classes.

FYI - the caption structure is designed to be responsive, and should be with the code you have above.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.