Oracle of ONE1

Problem statement: I have inserted an image using the TinyMCE editor in a Joomla 1.5 article. How do I get the image to display both a caption and a border? I do not want borders on all images but only those I specify.

At first glance, the solution seems as though it would be simple and straightforward but it actually requires some tricks. This article will approach the issue in a somewhat backward approach; starting with what is required of the end-user editor, then going to changes required of the administrator, and finally touching on a little of the why.

For the Editor

Simple steps:

1. Create your article and insert your images using the standard methods.
2. Add a caption
   1. Click on the image so that it is highlighted
   2. Click on the ‘Insert/Edit Image’ icon
   3. In the ‘General’ tab, enter a Title (the title is used to become the caption)
   4. In the ‘Appearance’ tab, set the class to caption
3. Add a border
   1. Click on the image so that it is highlighted
   2. Click on the ‘Insert/Edit Attributes’ icon
   3. In the ‘Attributes’ tab, set the class to (value)
   4. Enter border as the class (this is border only, no caption)
   5. Or, enter caption border as the class (the image will have a border and a caption)
4. Save all of your changes

Where is the ‘Insert/Edit Attributes’ icon? Well, if your administrator has set up everything correctly, it should appear as in the image below.

Insert/Edit Attributes

For the Administrator

In the default installation of Joomla, the ‘Insert/Edit Attributes’ icon does not appear in the TinyMCE toolbar. Additionally, the border style is not part of the default CSS. Both of these are easily fixed.

TinyMCE Plugin

The settings for the TinyMCE editor are available from its plugin. The steps are:

1. Click ‘Editor – TinyMCE’ from the Extensions > Plugins Manager.
2. Make certain that ‘Functionality is set to Advanced in the Plugin Parameters
3. Select Show for XHTMLxtras in the Advanced Plugin Parameters
4. Save changes and the icon will appear in the TinyMCE toolbar

CSS for Caption and Border

The CSS for captions are initially set in a system CSS file. These settings may be overridden in your stylesheet. Below is my caption CSS.

/* Caption overrdies */
.img_caption.left {
float: left;
margin-right: 1em;
}

.img_caption.right {
float: right;
margin-left: 1em;
}

.img_caption.left p {
clear: left;
text-align: center;
color: #666;
}

.img_caption.right p {
clear: right;
text-align: center;
color: #666;
}

l also add a short style to set the border around an image.

img.border { border: 1px solid #000; }

Why?

Joomla has taken an interesting and resonable approach for adding captions to images. Joomla simply takes the image’s title, processes it with some javascript, and outputs it with the image. The final display of the caption is controlled by the CSS. The files used are:

• /templates/system/css/general.css
• /media/system/js/caption.js