imgAlong with the Link manager, the JCE Editor Image Manager is a very powerful tool that allows even the novice user ease in uploading,  organizing and styling images.  It's features also allow you to set the alignment, margin, border, rollover image, classes, inline styling and alt tags.

Image Manager: The Image Tab

imagemanager-imagetab

The initial screen of the dialog box allows you to select from your existing images or browse your own computer to upload a new image.

URL: you may type in the path to your image OR allow this box to be populated when you select from an image using the File Browser below.

Alternate Text: This text will be placed into the alt="" descriptor in you <img> tag.  It is important for SEO and for people using screeen readers. If you leave this blank, Joomla will insert the name of the image file without the extension.

Dimensions: You can force new dimensions to override the size of the original image. You can just enter the height or the width and leave the Proportional checkbox with a check and the image manager will do the math for you. If you don't enter new numbers in here, the image will come in at the exsiting size or will fit the width of the containing div for the content.

Caution: Placing dimensions in here can be hazardous for images on mobile devices.  If you force dimensions, the image may be too large for phones. By default JCE Editor will place the height="" and width="" from the original size of the image as inline dimensions.  It is best to turn off that feature in the Global Configurations for JCE Editor in this day and age of Responsive Web Design. Click here for the joom3 article on JCE Editor: Responsive Web Design Tips

Alignment: This allows you to set the float for the image. What this means is that the image can float to the left and the other content will stay to the right, float to the right and content will stay to the left. You can also set the vertical alignment to top, middle or bottom. The Clear pulldown selector will allow you to make the image "clear" another floated element and go below it.

Margin: This sets the amount of cushion around the image. The values are in pixels. If you leave the Equal Value box checked, whatever number you put in the Top text box will be equaled on all sides.

Border: if you want a border around your image, you can check the check box here. When it is checked, you may select the width, style and color for the border.

File Browser

The file browser of the JCE Editor Image Manager can virtually replace (and greatly improve upon) the Media Manager under Joomla's Content menu. You can create folders, upload, delete, rename, preview, copy and paste images. 

root-icon These are the folder breadcrumbs showing you what the current folder is. If it only says Root, then you are at the Root of the image folder on your Joomla installation.
folder-create-icon Click on this icon to make a new folder inside whatever is the current folder.
file-upload-icon Click on this icon to upload an image from your own computer to the Current folder shown in the center panel. When you click on this icon a dialog box will appear where you can browse your own computer for an image file, then upload it. When have uploaded the image the Image Editor will show the most recently uploaded images in bold. It will not automatically insert that image into the url, you must click on the image name for this to happen. Note: you can upload several images at a time if you so choose.
help This opens the Image Manager Help screen if you need clarification on a certain topic.
Folders These are the folders in your images directory on the root of your Joomla site. You can see sub-folders by clicking on the little minus sign to the left of the folder name. To open a folder to view its contents in the middle column, double click on its name.
imange-manager-center-panel The icons along the top of the center panel allow you to:
  • select all the images at once,
  • sort in alphabetical or reverse alphabetical order,
  • switch to a detailed view of the images showing the date they were created and the file size and
  • search for a particular term within the image names.  
These options come in handy if you have a long list of images.
Details If you click on an image name, this panel will display the details about the selected image - such as the extension, the file size, its Modified date and the dimensions in pixels.  It also displays a thumbnail view of the image.  Caution: when you click on the name of the image, it changes the path in the URL at the top of the screen.
filedelete This will delete the file(s) that is checked and/or highlighted
filerename You can rename a file using this icon.  Be aware that if you rename a file that has been used elsewhere on the site, it won't show up on the site in the other location. JCE Editor gives you a warning dialog box about this.  You can change the name of the file, but you cannot change the extension on the file with this tool.
filecopy With this icon, you can copy the selected file(s), navigate to another folder and paste the files in the new folder.
filecut With this icon, you can cut the selected file(s), navigate to another folder and paste the files in the new folder.
filepreview This icon allows you to see a preview of the file that is larger than the small thumbnail.
fileinsert This icon will insert the name and path of the file that is checked into the URL at the top of the dialog box.

Image Manager: The Rollover Tab

A rollover is the image that replaces the original image when the user hovers over the image with his mouse/cursor. This is often used as a navigational aid to let people know that this is a link. With this section you can upload an image that will replace the original image for the rollover effect.

This action places onmouseover="" and/or onmouseout="" into the <img> tag.

Image Manager: The Advanced Tab 

imagemanager-advancedtab

The Advanced tab of Image Manager allow you to stylize your image, add classes from your stylesheet, add a title, ID, or language information.

Style: you can add inline styles to your image within this textbox.  This could be such things as box-shadow, width, or any attribute that can be placed on an <img> tag. The text entered here must be HTML and each term separated by a semi-colon.

Class List: This dropdown selector will allow you to select one class fromany existing classes set up in associated stylesheets. If you want to know how to associate your stylesheet so that your classes are available here, visit the joom3 articlenamed JCE Editor: Link a Custom Stylesheet.

Classes: You can type in one or more class names here.  Each class is to be separated by a space.  This will add the class to the <img> tag even if you don't have that stylesheet associated through JCE Editor's Global Configuration.

Title: This will add title="" to the <img> tag.  The title will show up as a small text box as the user hovers over the image.  The title tag is sometimes used for JavaScript applications as well for captions and the like.

Note: People often confuse the alt="" attribute with the title="" attribute for <img> tags. The alt attribute will show up on the page if the image is missing and is read by screen readers and search engines. If you search in Google for an image, it found that image by reading the alt attribute. It can be good for SEO. The title attribute is nice if you want to put a little description or comment about the image that will only show up if the user hovers over the image.

Id: This will put the entered text into the <img> tag as id="". This may be needed for certain JavaScript funcitons, for special CSS styling or for other reasons.

Language Direction: This allows you to set Left to Right or Right to Left if you need to for your language settings.

Language Code: There are codes for the various languages, you can enter that here.

Long Description: Here you can type the URL to a document that has a description of the image if you need to elaborate.