With the Image Manager you can
- Upload images
- Create folders
- Rename, cut, copy, paste and delete folders and images
- Create Rollover images
- Insert images into articles
Image Manager Interface
The Image Manager interface, like all the Manager plugins (Image Manager Extended, File Manager, Media Manager etc.), consists of 2 sections, the Attributes section, and the File Browser section.
Attributes
This section is divided into 3 parts, each accessible by clicking on the named tab. The default tab display is of the Image section, which contains the fields that represent the main image attributes of the currently selected article image, or the image to be inserted into the article.
Image
Set the most common attributes for the image including URL, Description and Dimensions. See Inserting an image
Rollover
Create rollover images. See Creating a Rollover image
Advanced
Set advanced attributes for the image. See Advanced Options
File Browser
The Image Manager File Browser has the same basic features as the other Manager plugins, with tools for creating new folders, uploading images and deleting, renaming, copying and moving files and folders. For more information on the File Browser features, see the File Browser section.
Inserting / Updating an Image
To Insert an Image
- Select the image from the File Browser by clicking on its name. The URL, Alternate Text and Dimensions fields will be updated with the images properties.
- Adjust the image properties as required. In the animation below, the image is aligned left, and a 5 pixel margin is added around the image. The preview on the right is updated with these changes.
- Click the Insert button at the bottom of the dialog.
URL
The URL field represents the image's src attribute, and is the relative path to the image on the server.
Alternate Text
This represents the alt attribute, and defines a short description of the image.
The width and height of the image, in pixels. If the proportional checkbox is checked, changes to one value will automatically be affected on the other. By default an image will be inserted without a width and height, unless the original values are edited.
Margin
Represents the amount of space (in pixels) between the image and surrounding items. If the Equalize box is checked, all margin positions will use the same value.
Alignment
The position of the image relative to surrounding text.
Border
Create a border style on the image with options for width, style and colour.
To Update and Image
When the Image Manager opens, all relevant fields are updated with the image's attributes.
The folder where the image resides is opened and the image selected. The image's properties are displayed in the Details view.
At this point you can change the image by selecting a new one (follow the steps above) or alter any of the fields in any of the tabs.
Click the Update button to update the image with the changes.
Upload an image
To upload an image
- Click the Upload button to open the Upload Dialog
- Click the Browse button and locate the target images on your computer. Multiple images can be selected and added.
Images can also be dragged and dropped into the upload dialog.
- The images will be added to the upload queue. The name of each image can be edited and an image can be removed from the queue by clicking the trash icon
- Click the Upload button to begin the upload. The progress of each upload will be disaplayed as a percentage and by the progress bar beneath each image. When all the images have been successfully uploaded, the dialog will close. If an upload fails, an error message will be displayed below the image name.
Advanced Options
The Advanced tab contains fields to set additional attributes for an image.
Style
Represents the style attribute. Will be populated with styles set in the Image tab (margin, float etc). Additional styles can be added using the style element syntax, eg: text-align:right;vertical-align:middle;
Classes
A list of classes from your Joomla! template that can be applied to the image. Classes can be selected by clicking the drop-down icon, or typed into the field seperated by a space.
Title
Represents the title attribute. Used as a description of the image.
Id
Set the id attribute of the image.
Language Direction
Text direction of the element.
Language Code
Language code of the element eg: en-GB
Image Map
Id of the associated image map.
Long Description
URL to a html or text document containing a detailed description of the image. To select and existing html file, or upload one to use, click on the File Browser icon on the right of the field.
Creating a Rollover Image
What is a 'Rollover Image'?
A rollover image is an image that changes when the mouse cursor is placed over it, for example (place your mouse cursor over the image below)
The rollover effect uses Event Attributes to create the effect. As event attributes are able to execute javascript, their use is disabled unless specifically enabled in an Editor Profile. Once they are enabled, the Rollover tab will be visible in the Image Manager.
As event attributes are able to execute javascript, these should only be enabled in profiles assigned to trusted users.
To enable Event Attributes
-
From the JCE Control Panel, click on the Editor Profiles button, then click on a profile to edit, eg: "Default"
-
Click on the Editor Parameters tab, then on the Advanced tab.
-
Set the Allow Event Attributes option to Yes. The Allow Event Attributes option will not be visible but will automatically be enabled if the Allow Javascript option is enabled.
The Rollover Image Tab
The Rollover tab contains two input fields, Mouseover and Mouseout.
Mouseover
Represents the onmouseover event attribute. This is the image displayed when the mouse cursor is placed over the image.
Mouseout
Represents the onmouseout event attribute. This is the image displayed when the mouse cursor is moved off the image. This is also usually the defualt image.
Create a Rollover image
- Select the image that is to be the default image, ie: the one that is displayed in the content item.
- Click the Rollover Image tab.
- Select the image that you would like as the mouse over image.
- You can now go back to the Image tab and adjust the parameters as required.
- Click Insert.
Remove a Rollover image
To remove a Rollover image, delete the contents of the Mouseover field in the Rollover tab.