Download & Extend
Image Caption » Issues

How do I add a caption using the image caption filter, wysiwyg, and ckeditor?

Posted by Juc1 on June 1, 2011 at 10:56am
Project:Image Caption
Version:6.x-2.5
Component:User interface
Category:support request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

Hi all,

I am new to image_caption - I can get the caption by adding Only local images are allowed. to the plain text editor but should I be able to add a caption from CKEditor? If so, I can't see how to do this (for example I can't see how to add the caption class to the image in CKEditor).

Any suggestions please?

Thank you

Login or register to post comments

Comments

#1

Posted by N4R4YAN on July 3, 2011 at 3:40pm

Actually i am trying this right now and i found out that the caption shows up when i add, in the CKEditor field named "Stylesheet Classes", the "caption" string and then add whatever text string you want as caption in the "Advisory Title" field. What i did not understand is how i put the real css style (like the example shown in the screenshot on the module page).
I didn't add the .caption {} empty class because i can't find the right css stylesheet to put it in.
But then again i don't really know if you actually have to do do only 1 of those 2 steps. Like either add the custom .caption {} style or add everytime "caption" on "Stylesheet Classes" field on CKEditor window.
Still, as it is empty only a text will show up, no formats, no visual effects, no styles.

EDIT: Anyway i just saw you are mentioning the problem using Drupal 6, what i said is intended for Drupal 7 use. I didn't notice, sorry. Anyway try and see, maybe the CKEditor window is the same and you can find everything i mentioned there.

#2

Posted by dkingofpa on July 19, 2011 at 3:03pm

I'm using the wysiwyg module with the ckeditor library.

  1. Enable Image Caption Filter module.
  2. Enable the image caption filter on the input format settings.
  3. Enable the Image button on your wysiwyg profile for that input format.
  4. Click Image button in wysiwyg to bring up the image properties dialog box.
  5. Provide a url for the image.
  6. Click on the Advanced tab.
  7. Add a class to Stylesheet Classes field (must be either image-left, image-right, or standalone-image).
  8. Add a caption by entering an Advisory Title.
  9. Click OK.

The image will display in the wysiwyg, but not the caption. Keep in mind it's the image caption filter that does the work of creating the divs when the content is displayed on a page. The wysiwyg knows nothing of the filter so it can't display the caption. To see the caption, you need to actually view the content. You'll need to style the caption on your own to get it to display how you want.

AttachmentSize
step_5.jpg 48.01 KB
step_7_8.jpg 36.49 KB
wysiwyg_view.jpg 31.42 KB
page_view.jpg 28.85 KB

#3

Posted by dkingofpa on July 19, 2011 at 3:06pm
Title:WYSIWYG» How do I add a caption using the image caption filter, wysiwyg, and ckeditor?

Editing issue title to be more descriptive.

#4

Posted by fletchgqc on August 24, 2011 at 3:23pm

dkingofpa's instructions are good. But I'll tell you a cool trick to get at least the space for the caption showing up in the WYSIWYG. These are some example styles, just copy the basic idea. In particular the use of the img.image-left[title] style.

.image-left {
float: left;
margin: 5px 20px 5px 0;
}

.image-right {
float: right;
margin: 5px 0px 5px 20px;
}

img.image-left[title], img.image-right[title] {
padding-bottom: 31px;
background-color: #eee;
}

span.image-left, span.image-right {
display: block;
border: 1px solid #aaa;
padding: 8px;
}

.caption {
display: block;
font-size: 0.8em;
color: #777;
line-height: 1.5em;
padding: 0 3px;
text-align: center;
}