Tinymce4 4.3 offers a improved caption option according to https://www.tiny.cloud/docs/plugins/image/
In topic https://www.cmsimple.org/forum/viewtop ... f=20&t=615 you have a fine guide for activating the image resize, adv_tab and class option,
It works fine, and the result is nice in the site layout.
Is it possible to give a similar guide for implementing the caption option in a way that works equally fine with cmsimple and cmsimple templates ?
Figure text to a picture can be done in many ways, but the most common table solution tends to work less fine with responsible themas , where the figure class could be much easier to write and with a more readeable layout design.
Best regards
JH
Tinymce4 and caption in imagetool
Re: Tinymce4 and caption in imagetool
Hello,
1. Make a copy of the file ./plugins/tinymce/inits/init_full.js
2. Activate your new init-file in the CMS configuration
(1 and 2 only if not already done, maybe you already have an own init-file)
3. Open your (new) init-file
4. Search for following block:
5. Extend it with a new line:
Now it works.
But it is not easy to handle it, you need some knowledge of CSS.
Here is my "quick and dirty" CSS, you can add it to your template stylesheet:
And here you can see it:
https://ge-webdesign.de/demotpl/?Plugin ... escription
Good luck - Gert
1. Make a copy of the file ./plugins/tinymce/inits/init_full.js
2. Activate your new init-file in the CMS configuration
(1 and 2 only if not already done, maybe you already have an own init-file)
3. Open your (new) init-file
4. Search for following block:
Code: Select all
...
image_description: true,
image_title: true,
image_dimensions: false,
image_advtab: true,
...
Code: Select all
...
image_description: true,
image_title: true,
image_dimensions: false,
image_advtab: true,
image_caption: true, // the new line
...
But it is not easy to handle it, you need some knowledge of CSS.
Here is my "quick and dirty" CSS, you can add it to your template stylesheet:
Code: Select all
/* TinyMCE image descriptions */
figure.image {background: #ddd; border: 0px solid; padding: 0; margin: 20px 0 30px 0;}
figure.image img {box-sizing: border-box; display: block; width: 46%; max-width: 300px; float: right; margin-left: 20px;}
figure.image figcaption {background: #ddd; font-size: 16px; font-style: italic; padding: 9px 16px;}
https://ge-webdesign.de/demotpl/?Plugin ... escription
Good luck - Gert
Re: Tinymce4 and caption in imagetool
Thank you, it was useful.
And correct, still some styling to do in css file depending on what look is preferred, and maybe some conflicts with dimension and other option.
But the principle is clear from your example at https://ge-webdesign.de/demotpl/?Plugin ... scriptions
The caption text is written in editmode directly in the imageblock, and not in the in the image descriptionfield show when the image is right-clicked
The rest is hard css-coding
JH
And correct, still some styling to do in css file depending on what look is preferred, and maybe some conflicts with dimension and other option.
But the principle is clear from your example at https://ge-webdesign.de/demotpl/?Plugin ... scriptions
The caption text is written in editmode directly in the imageblock, and not in the in the image descriptionfield show when the image is right-clicked
The rest is hard css-coding
JH