Adding .caption class to FCKEditor
| Project: | Image Caption |
| Version: | 6.x-2.3 |
| Component: | Documentation |
| Category: | task |
| Priority: | normal |
| Assigned: | marius.s |
| Status: | active |
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.
#1
Automatically closed -- issue fixed for two weeks with no activity.
#2
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?
#3
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
#4
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?
#5
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".
#6
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!
#7
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!
#8
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).
#9
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.
#10
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).
#11
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.
#12
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.
#13
#14
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.
#15
I should be able to help if you can show me a link to your site.
#16
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
#17
No one is listening??
#18
If you're referring to the issue with overlapping text, this fix can correct it:
http://drupal.org/node/249955#comment-2070908