My users create posts and, in the richtext editor, they insert images throughout the text. Now they want some way to put captions on the images. I have edited the source for the post and created divs around the images with their caption at the bottom of the div to work around it. Obviously, I don't want them learning html to create divs in the source.

Maybe couch 2.0 will have some way to do this, like Wordpress handles the captions for images?

[cheesypoof]

The Enhanced Image widget for CKEditor would be what you want. Nevertheless, I'm not sure if we will opt to include it in 2.0.

The CKeditor website states that the Enhanced Image plugin is built in to the editor since version 4.3. What version is included in Couch? I was under the impression that the richtext editable field uses ckeditor, but if I look at an image properties in the editor, I don't see any mention about captions. The ckeditor website mentions that manual installation of plugins is not recommended. What's the best way for me to get this feature until (maybe) 2.0?

[KK]

@wysocki

I could get this plugin to work with Couch 2.0 -

caption.jpg (20.06 KiB) Viewed 7764 times

I'll outline the steps for you -
1. You'll require CKEditor v 4.5.9 (you can get it from this post - viewtopic.php?f=5&t=10241&start=40#p24856).

While the post mentioned above refers specifically to Couch v2.0, I think you can use it to upgrade the CKEditor used by Couch v1.4.7 too.

2. Once the later version of CKEditor is in place, extract the contents of the following attached zip

plugins.zip

(279.31 KiB) Downloaded 1273 times

It will yield three folders that you should place within 'couch/includes/ckeditor/plugins' folder.

3. Finally, edit 'couch/includes/ckeditor/config.js' and modify the following portion -

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.language = 'en';

to make it as follows -

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

config.language = 'en';

config.extraPlugins = 'lineutils';
config.extraPlugins = 'widget';
config.extraPlugins = 'image2';

The sequence in which the plugins are activated in the config file above is crucial so please simply copy and paste the three lines above at the right location.

And that should be it. Refresh your browser a few times to bust its cache and now you should find the caption plugin working.

Hope it helps.

Finally got around to implementing captions via the ckeditor v4.5.9 built into couch v2.0. It does allow me to enter captions, but it doesn't wrap <figure> and <figcaption> in a cool css wrapper like the demo on http://sdk.ckeditor.com/samples/captionedimage.html

Oddly, the admin edit page DOES display the framing around the image and caption like the above example somehow WITHOUT showing any wrapper in the source. But the live site does not include the wrappers in the source and hence, does not show the framing.

How can the editor show the wrapper without displaying it in the source and why doesn't the live page do the same? What do I need to do to get this to work (if it doesn't take more than three lines of code)?

[KK]

@wysocki,

I created a draft of your 'contact' page to test your reported observation out.
You can still find the page in the drafts section of your site - the richtext editor in it has a captioned image that I added. Click on the 'source' button of CKEditor and you'll see that the HTML shows something like this -

Code: Select all

<figure class="image">
    <img alt="" height="227" src="http://site.com/path/image.jpg">
    <figcaption>My Caption</figcaption>
</figure>

View the draft on the front-end and you'll see the same HTML over there too.

So, I couldn't spot anything amiss.

BTW as an aside, your image explorer is complaining about 'Header already sent in couch/config.php' Line 1'. Please check that file as you must have inadvertently introduced some spaces or UTF8 BOM headers in it..

@KK:
Go to covinasunriserotary.com and under "Articles" view the "2015 Kickout..." post. Notice there are two images with captions, but the caption text is simply shown beneath each pic, but the css framing effect is not shown!

Sign on to my admin panel under "Articles and Newsitems" edit the "2015 Kickout..." post. Notice under "Main Body of Article" the images show the css framing effect present on both.

Why doesn't the framing show on the live site for these images?

[KK]

Why doesn't the framing show on the live site for these images?

That is because your front-end CSS does not define the rules to show the framing.

There is no problem with the generated markup (it outputs the 'figure' and 'figcaption') - you now just need to setup the required CSS styling rules for your site. As a rough guide, you may copy the ones used by CKEditor itself in the admin-panel (see it in your browser's dev console).

Hope it helps.

Hi KK,
I updated my CKEditor to the new one but each time I try to save a page I get this error:

You don't have permission to access /kt-admin/ on this server.
Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

Hi KK,
got this working fine in the backend, but can't seem to get it to work in the front-end with inline editing.
any ideas?
cheers, gwil