Some more specific instructions regarding adding of .caption class (style) to FCKEditor (using fckeditor-5.x-2.2-rc3):

1. In sites/all/modules/fckeditor/fckeditor/fckstyles.xml:
Find the string:
<!-- Object Styles -->
After that, add this text:

<Style name="Image Caption" element="img">
	<Attribute name="class" value="caption" />
</Style>

2. In sites/all/modules/fckeditor/fckeditor.config.js:
Find the toolbar set that is currently used. For me it's
FCKConfig.ToolbarSets["DrupalFull"] = [
Append any one line of this set with this text: 'Style'
In my case, I changed this:
['FontFormat','FontName','FontSize'],
to this:
['FontFormat','FontName','FontSize','Style'],

3. Now, when editing content, select (important!) the image that you want the caption added to. In the FCKEditor toolbar, click on the dropdown list "Style" and choose "Image caption". For the caption to be displayed, it has to be set as Image title.

CommentFileSizeAuthor
#6 fck_caption.gif107.43 KBCourtney.B
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

roddy003’s picture

roddy003 CreditAttribution: roddy003 commented
Version: 5.x-1.1 » 6.x-2.3
Status: Closed (fixed) » Active

I added the "Image caption" style to fckstyles.xml (there was two other styles under the category "object style"). I also activated the style dropdown box in fckeditor.config.js. But when I select the inserted image, there is no caption style in the style dropdown box, only two other styles that existed before.
Why is the caption style not visible?

Anonymous’s picture

Anonymous (not verified) CreditAttribution: Anonymous commented

In case you haven't come across the solution yet, click on an image in FCKEditor to make the .caption class appear in the Style dropdown. If you used the default fckstyles.xml file from FCKEditor, the listing in the dropdown should change from:
Marker:Yellow
Marker:Green
Big
Small
(etc.)

to:
Image on Left
Image on Right
Image Caption

bierstein33’s picture

bierstein33 CreditAttribution: bierstein33 commented

I've noticed the same issue. I've done the above steps and still only get the Image on Left and Image on Right options when I've selected an image.
Anyone have a solution? Where exactly is the Image Title located or does that have to put in via HTML?

marius.s’s picture

marius.s CreditAttribution: marius.s commented

Just clear your browser's cache, to get the styles appear in drop-down list.

Image title can be put in via HTML, or, alternatively, if you use IMCE, you can put it in a field called "Advisory title".

Courtney.B’s picture

Courtney.B CreditAttribution: Courtney.B commented
FileSize
fck_caption.gif107.43 KB

I've followed the above directions and cannot get the drop-down list to work (including clearing the cache, etc). For me to get the captions to work, I have to type "caption" in the Stylesheet Classes box and whatever I want for the caption in the "Advisory Title" box (see below attached image). I'm using FCKeditor 6.x-1.3 as of now - should I update to 6.x-2.0-beta1 to get the drop-down list to work or is the version inconsequential to what I'm trying to do?

Thanks!

marius.s’s picture

marius.s CreditAttribution: marius.s commented

I can confirm that the above directions work with fckeditor-5.x-2.2-rc3 and 6.x-2.0-beta1. Can't comment concerning 6.x-1.3, as I haven't tried it.
You could try a fresh drupal install with just fckeditor 6.x-2.0-beta1 and image caption modules, and see if it's working.

Good luck!

Apollo610’s picture

Apollo610 CreditAttribution: Apollo610 commented

For anyone having problems with getting the Image Caption style in the dropdown, be aware that you may have to copy the modified fckstyles.xml to your theme directory (sites/all/themes/[yourtheme]).

Only after doing this did the Image Caption style appear in my FCKeditor (2.0-beta1).

carlclancy’s picture

carlclancy CreditAttribution: carlclancy commented

I've got everything working perfectly except that the caption won't display!

Have a look: http://www.imsta.ie/node/166

It's the HC21 logo that should have a caption underneath. If you inspect my code you'll see that the title is "this is the image caption", but there's no div or anything to display it. How is that supposed to work?

Apologies in advance for this probably being a stupid question; I've been trying to sort out image captions for three days now, and my concentration is shot.

Apollo610’s picture

Apollo610 CreditAttribution: Apollo610 commented

Hey Carlclancy - it looks like the DIV isn't being generated in your

If you want an example of how it works, you can check out this site. The caption under that image is from this module.

I'm not sure what would cause your particular problem though. Setup on my side was fine per the install instructions, but I was caught up on the dropdown displaying (which i posted above).

marius.s’s picture

marius.s CreditAttribution: marius.s commented

Not knowing more, I'd suggest to try to enable the "Image caption filter" module, that comes together with "Image caption", see if that helps.
Also, maybe you need to set the input format of the node to Full HTML.

carlclancy’s picture

carlclancy CreditAttribution: carlclancy commented

I figured this out. As usual, I'd overlooked a basic step - I hadn't enabled the Image Caption module for the content type I was testing!

Many thanks for all the help, and if anyone is stuck with any part of this please PM me and I might be able to help. The best general advice I can give though is to stick to the version numbers mentioned here.

-Carl.

RichieRich’s picture

RichieRich CreditAttribution: RichieRich commented
arnieswap’s picture

arnieswap CreditAttribution: arnieswap commented

The image caption is appearing, but now the text is overlapping the image. That caption module is over-writing the margins I created through Style.

carlclancy’s picture

carlclancy CreditAttribution: carlclancy commented

I should be able to help if you can show me a link to your site.

arnieswap’s picture

arnieswap CreditAttribution: arnieswap commented

Caricancy,

Thanks. My main site is Kalkion.com, where I was trying to work on Caption. I can not experiment with a live site so I have created the same set-up for another upcoming technology news site Katonda.com. Please have a look at this page.

Here I am using Image Caption and you can see text overlapping. I selected Image on Left and Image Caption.

"Adam and Eve creative commons free image"

http://katonda.com/content/test-1

Swapnil Bhartiya

arnieswap’s picture

arnieswap CreditAttribution: arnieswap commented

No one is listening??

Shane Birley’s picture

Shane Birley CreditAttribution: Shane Birley commented

If you're referring to the issue with overlapping text, this fix can correct it:

http://drupal.org/node/249955#comment-2070908

marius.s’s picture

marius.s CreditAttribution: marius.s commented
Status: Active » Fixed

If you are using CKEditor instead of FCKEditor, use these instructions to have the captions working:

1. In sites\all\modules\ckeditor\ckeditor.styles.js:
Find the string:
/* Object Styles */
After that, add this text:

	{
		name : 'Image Caption',
		element : 'img',
		attributes :
		{
			'class' : 'caption'
		}
	},

2. In sites\all\modules\ckeditor\ckeditor.config.js:
Find the toolbar set that is currently used. For me it's
config.toolbar_DrupalFull = [
Append any one line of this set with this text: 'Styles'
In my case, I changed this:
['Format','Font','FontSize'],
to this:
['Format','Font','FontSize','Styles'],

3. Clear browser cache

4. Now, when editing content, select (important!) the image that you want the caption added to. In the CKEditor toolbar, click on the dropdown list "Styles" and choose "Image caption".

5. Entering the caption is done here: right click on the same image, select "Image properties", click on "Advanced" tab, and type your caption in the field called "Advisory title"

Versions used:
Drupal: 6.15
CKEditor (drupal module): 6.x-1.1
CKEditor: 3.2 (the editor itself)
Image Caption: 6.x-2.5

btc97’s picture

btc97 CreditAttribution: btc97 commented

Thanks marius.s, but does anyone know how to add a class with CKEditor when using the WYSIWYG module?

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

rproskov’s picture

rproskov CreditAttribution: rproskov commented

Is there any way of changing caption size. For example, if you hive a small picture but caption is massive, is there a way to change caption to a smaller shift.

DrDeezee’s picture

DrDeezee CreditAttribution: DrDeezee commented
Version: 6.x-2.3 » 6.x-2.5
Category: task » support
Status: Closed (fixed) » Needs review

Hello all,

I tried following the steps provided by Marius.S in post #19 to get Image Caption working with CKEditor on my site, but things aren't working properly. I am able to select an image and select "Image Caption" from the style dropdown menu, but this appears to have no effect - it doesn't modify the output of the HTML code for the image, and if I click away from the image and select it again, I have to reselect "Image Caption" as a style.

I am trying to apply captions to images which are hyperlinks and aligned either to the left or the right, so this thread seemed like it would be relevant. I tried applying the patch provided in post #1 but it did not resolve my issue.

I am a Drupal and php newbie, so if someone knows the solution and could break it down for me, I would very much appreciate it. I would love to get this module working, rather than requiring my content contributors to apply their own captions to images using Photoshop or something. I am using Image Caption 6.x-2.5, CKEditor 6.x-1.2, and ICME 6.x-2.0-rc2.

Thanks for your time!

marius.s’s picture

marius.s CreditAttribution: marius.s commented

Dr. Deeze:
it could be due to different versions of the WYSIWYG editor.

in the example I was using FCKeditor, and you are using CKEditor.

If I'll find a working version of Image Caption with CKEditor, I'll post it here.

Shane Birley’s picture

Shane Birley CreditAttribution: Shane Birley commented
Issue summary: View changes
Status: Needs review » Closed (outdated)