Tinymce4 and caption in imagetool

Erweiterungen
Post Reply
ffelicia
Posts: 16
Joined: Mon 2. Nov 2015, 18:46
Location: Kerteminde Denmark
Contact:

Tinymce4 and caption in imagetool

Post by ffelicia » Fri 14. Dec 2018, 11:25

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

Gert
Posts: 1180
Joined: Sun 18. Nov 2012, 14:18

Re: Tinymce4 and caption in imagetool

Post by Gert » Fri 14. Dec 2018, 14:46

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:

Code: Select all

...
image_description: true,
image_title: true,
image_dimensions: false,
image_advtab: true,
...
5. Extend it with a new line:

Code: Select all

...
image_description: true,
image_title: true,
image_dimensions: false,
image_advtab: true,
image_caption: true, // the 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:

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;}
And here you can see it:

https://ge-webdesign.de/demotpl/?Plugin ... escription

Good luck - Gert
Gert Ebersbach | CMSimple | Templates - Plugins - Services

ffelicia
Posts: 16
Joined: Mon 2. Nov 2015, 18:46
Location: Kerteminde Denmark
Contact:

Re: Tinymce4 and caption in imagetool

Post by ffelicia » Fri 14. Dec 2018, 22:52

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

Post Reply