WordPress Image Captions Using FCKEditor Plugin

The default WYSIWYG editor that comes bundled with WordPress leaves much to be desired. So it is often necessary to upgrade the editor to something more fully-featured, such as the FCKEditor. However, there is one problem with using something other than the default editor. Some features, such as the new image captions released in version 2.5 are missing. So how does one go about adding image captions using the FCKEditor?

Introducing the Velvet Blues Image Captions Plugin

This plugin automatically creates captions for your images based on the text used in the image’s alt (alternative text) tag. And it works out of the box with all WordPress themes built for versions 2.5+. For other themes, you will have to see the additional instructions below.

Download the Image Captions Plugin

Current Version: 1.0

Compatible up to WordPress version 2.7

Features

  • Automatically adds captions to images according to the caption styles in your theme
  • Optionally edit the plugin’s CSS files to override your theme’s caption styles

Installation

  • Download the plugin and unzip.
  • Put the velvet-blues-image-captions folder in your wp-content/plugins folder.
  • Activate the plugin through the WordPress admin.

Themes for WordPress 2.3 and Lower

For themes that were created for versions of WordPress 2.3 and lower, you probably don’t have CSS styles which determine the way your captions look. So you will need to activate this plugin’s stylesheet. In the plugin folder, you will find a file called vbic.css. Open the file, delete the two lines that say "DELETE THIS LINE TO ACTIVATE STYLES", and save. Upload the revised files to the plugin folder in your plugin directory.

Uninstallation

To uninstall, simply deactivate the plugin. Since the plugin does not add any HTML to your posts, there will be no leftover captions or data to deal with.

Usage

  1. Define captions by adding some text to your images’ alt attributes. In FCKEditor, you can do this by adding text in the field marked Alternative Text.
  2. Set the alignment of the image — left, right, center — by choosing an option from the align select menu.

If you don’t want a caption to be displayed, don’t set the alt attribute. No other work is needed to display or hide captions.

FAQs

  1. Why aren’t captions showing up? Verify that you have added caption text to your image’s alt attribute, and make sure that the plugin has been activated.
  2. Is my theme compatible? Your theme should be compatible with the plugin if it was created for WordPress 2.5 and up. However, if your theme is not compatible, you can make this work by editing the CSS file as explained above under installation.
  3. Why are images not displaying in the right position? The plugin determines where to display the image based on the content of the align attribute. So when inserting your images, be sure to set ‘left’, ‘right’, etc…

To Do

  • Add admin panel for easy manipulation of caption styles
  • Get hosted by WordPress.org? Probably not.

Donate

Support

For help with this plugin or suggestions, leave a comment below.

Tags: ,

10 Responses to “WordPress Image Captions Using FCKEditor Plugin”

  • Nihar January 12, 2009 at 5:53 am

    Hey is this plugin developed by you? Nice plugin. will check this out.

    • Velvet Blues January 12, 2009 at 6:27 am

      Sort of. I modified a preexisting caption plugin to make it compatible with 2.5+ theme caption styles. And I also added some code to retrieve the FCKEditor alignment (align) value for the images so that it could be enclosed in div tags with the appropriate classes. (If you look at the plugin source code, I make a note to this effect. Yay GPL! :-) ) – So unlike the other plugins, this WILL work out of the box for all updated templates, without any technical knowledge required. And it is coded especially for use with the FCKEditor.

      And once I add the admin settings page and improve upon it in all the additional ways that I want, it’ll be completely different from the plugin on which it is based.

  • Kim Woodbridge January 12, 2009 at 1:42 pm

    Great tutorial. I don’t use the visual editor but this can really help people who do. I know I’m older than 12 but the name of that editor always makes me laugh ;-)

  • Ben Pei January 17, 2009 at 8:54 pm

    Hey Shirley, that is really a job well done! I am sure it has saved lotsa bloggers some trouble

  • raafi April 2, 2009 at 7:28 pm

    Sounds like a good plug. it would be great to see a demo first, before I download, install in my blog and check if I like it or not.

  • CoastalData January 19, 2010 at 12:42 pm

    Hello, very nice plugin! I do have a problem, though, using it along with Sociable — the image captions plugin tries to stick all of the icons inside of caption boxes and ruins the display.

    I would prefer that this plugin overrode the default WP behaviour and only display caption boxes if the caption field is plugged, rather than attempting to caption all images which have an alt tag. Any idea of how this could be implemented?

  • Hardy February 22, 2010 at 7:52 pm

    Hai everybody,

    im really satisfied with your plugin … its great. But there is a problem when running velvet blues and autothumb together.
    Here are 2 code snippets:
    This is the output just running the autothumb plugin

    —- start html output —–

    —- end html output —-
    Picture size is 200px in width

    When running velvet blues a strange thing is happening. The width of the picture in the “style” is doubled – in my case from 200px to 400px and the picture width and height parameters are changed (height=”100″ width=”400″)

    —- start html output —-


    Hans aufm Bike
    —- end html output —-

    any solution for this problem?

    Thanks in advance for your help
    Hardy from Berlin

  • Hardy February 22, 2010 at 7:54 pm

    oha … the html was filtered out …

    What now?
    Hardy

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!