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

CommentFileSizeAuthor
#2 step_5.jpg48.01 KBdkingofpa
#2 step_7_8.jpg36.49 KBdkingofpa
#2 wysiwyg_view.jpg31.42 KBdkingofpa
#2 page_view.jpg28.85 KBdkingofpa

Comments

N4R4YAN’s picture

N4R4YAN commented

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.

dkingofpa’s picture

dkingofpa commented
StatusFileSize
new page_view.jpg28.85 KB
new wysiwyg_view.jpg31.42 KB
new step_7_8.jpg36.49 KB
new step_5.jpg48.01 KB

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.

dkingofpa’s picture

dkingofpa commented
Title: WYSIWYG » How do I add a caption using the image caption filter, wysiwyg, and ckeditor?

Editing issue title to be more descriptive.

fletchgqc’s picture

fletchgqc commented

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;
}

esb’s picture

esb commented

I am using ASP.NET with the CKEditor. I desperately need the caption ability you describe. Can you tell me how to implement it in ASP (i.e. without the drupal instructions) if that is possible?

Thanks