Image Manager

How to

1. Use Image Formats
2. Access Image Manager
3. Upload Images
4. Use Folders
5. Edit Uploaded Images
6. Resize Uploaded Images
7. Create an Image Rollover
8. • Image Rollover Example

Image Formats

There are many ways to create images: By taking photos and copying them over to your computer, by using an image editing program such as Jasc Paint Shop Pro or Adobe Photoshop or by copying them from CD Image or Clip-Art Libraries.

Images that are going to be viewed by a browser such as Mozilla Firefox or Microsoft Internet Explorer can only be stored in one of three image format types: JPEG, GIF or PNG.

JPEG images are commonly used for photos, or high quality images. They are highly compressed but the compression is 'lossy' (that is they lose most of the data during compression).

GIF images are often used for images with lots of text on them, transparency or very small numbers of colours. Large images that comprise of very few colours (ie 8 or 16 different colours) can be very highly compressed using the GIF image format without losing data. GIFs are limited, however, to 256 different colours at most.

PNG images can have transparency, millions of colours and no data loss during compression. They are a relatively new format for the web but often produce slightly larger file sizes than JPGs.

Whichever format you use is up to you but keep in mind that people do not often wait around for web sites that take a long time to load. The smaller you can make your images the better.

Accessing the Image Manager

To access the Image Manager you must be logged in with the administrator toolbar visible at the top of your screen. Select the button from the administrator toolbar. This will load the Content Menu, from here select 'Images'.

The Image Manager will load. Images currently in your system will be shown in the table on the right. The Manager Options menu is on the left.

Up to ten images will appear on each page. When more than ten images exist in a folder the top of the Manager will change. Forward and back arrows allow movement through the pages. The drop down list shows the ID numbers for the objects on each page.

Uploading Images

To add a new image to the Image Manager select 'Add Image' from the top of the Manager menu. To insert into a specific folder, select the folder from the Folder drop down list before clicking 'Add Image'.

A new page will load showing the details for the new image. A Title must be given to every new image - this will be shown next to the picture, in the Image Manager.

All attributes given to the image here will be applied to every instance where the image appears as an independent object in your website. When Images are inserted into Articles only the 'Alt Text' set here is applied. This can be edited in the Article Editor. If image alignment and links are required in an article, they are set when an image is inserted into the article editor.

Alignment: Determines the horizontal and vertical positioning of the image within the space of the page it has been inserted onto.

Alt Text: Alternate text appears when images cannot be viewed. This is highly recommended for images that are crucial to understanding the page, not the layout.

Please Note: If you have applied a 'Link' attribute and no 'Alt Text' is specified, no link will appear to your users when images are not visible.
See Accessibility and Alternate Text for more information.

Link: Sets a web based destination or action when the image is selected. To link to another page within your website, select 'Insert Link' and browse the page manager. To link to a web page that is not in your system type the address in the 'Link' text box. The drop down list here determines whether the new page will load in the same window or if it will instead cause a new window to open for it.
Please Note: Remember to include http:// for any external links. If this has not been included, clicking on the link will cause the Internet browser to instead search for a page with a similar name within your system.

When the title and all attributes of the new image have been set, select the 'Next' button. A new page will load in the same window. Select 'Browse' to locate the image on your computer.

When the file location has been entered into the text box, select 'Upload'.

The Image Manager will reload. The new image will appear on the last page of the folder where it was uploaded.

Using Folders

Folders are a handy way of sorting objects in your system. If you have a high content website often the number of images uploaded will also be quite high. To assist in finding a particular image it is often easier if it has been sorted into a folder or category.

The default folder that all images will be inserted into is 'Unsorted Objects'. New folders are not created until you move the first image into them.

Creating a New Folder:

• Select the radio button next to the first image you wish to place in the new folder.
• Click the 'Folder' button in the Manager Options menu. The page will reload showing the 'Move to Folder' options.

To create a new folder, select 'Custom' from the drop down list and type the name of the new folder in the text box.

• Select 'Save' to create the folder.

Moving to an Existing Folder:

• Select the radio button next to the image you wish to move.
• Click the 'Folder' button in the Manager Options menu. The page will reload showing the 'Move to Folder' options.

To move the image into an existing folder, select the folder name from the drop down list.

• Select 'Save' to move the image to the folder.

To return an image to the Unsorted Objects folder:

• Select the radio button next the image you wish to move.
• Click the 'Folder' button in the Manager Options menu. The page will reload showing the 'Move to Folder' options.
• Select 'Custom' from the drop down list and this time leave the text box empty.
• To complete the move, click 'Save'.
  

Editing Uploaded Images

The 'Edit' button in the Manager Options menu allows you to change the attributes of uploaded images. Rollovers (explained below) can also be created here.

To Change the attributes of an image:

• Select the radio button next to the image that requires editing
• Select 'Edit' from the Manager Options Menu.

• Alter the attributes as required
• Click 'Save' after making any permanent changes.

This feature can also used overwrite an image - ie: to remove the current image and replace it with a new picture. All instances of the old image are replaced by the new image once it has been uploaded. If you do not wish to delete the old image, it should either be duplicated or saved to your computer before you continue.

To duplicate an image:

• Select the radio button next to the image you wish to duplicate.
• From the Manager Options menu, select 'Duplicate'.

The new image will appear on the last page of the Image Manager. Both the original and the duplicate will have the same name, but different ID numbers. Altering one will not affect the other.

To overwrite an image:

• From the Image Manager select the radio button of the image to be replaced and click 'Edit' from the menu on the left.
• The details for the image will load. Near the bottom of the Image Details box is 'File', showing the existing file name (118.jpg in the example above). Select the 'Upload' button next to the file name to load the Upload File box.

Click the 'Browse' button.

• Browse your computer for the location of the new image.
  
• Select 'Upload' in the Upload File box once the file location has been selected.
• Click 'Save' after making any permanent changes to the Image Details.

Resizing Uploaded Images

The Aplinx system has a built in Image resizing tool that allows you to change the width and height of an image that has been uploaded to your system. Reducing the size of photos should not loose any quality.

To resize an image:

• In the Image Manager select the radio button next to the image you wish to resize.
• Click 'Resize' from the Manager Options menu.

The page will load showing the resize tool and the image being edited below. As the Width and Height are altered the image below will show a preview of the changes. The 'Constrain' box is ticked by default. unticking this box allows the image to be stretched or squashed. The image in this example was originally 113 pixels square.

When all changes to the image are complete select the 'Save' button. To revert to the original image size click 'Reset' to continue editing or 'Cancel' to make no changes.

Warning: Once clicking Save, all changes made with the resize tool are irreversible.

Increasing the width or height of an image is not recommended as pixelation is likely to occur. Instead of using this tool to increase image sizes, we recommend the original image should be located offline and altered to suit your needs in an image editor on your computer. When complete use the Edit feature in the Image Manager to overwrite the original with the larger image.

Image Rollovers

When the mouse cursor is moved over an image with a rollover, the original image changes to the set rollover image. Moving the cursor off the new image will cause it to revert back to the original image. Two images are required to make a rollover, the best of which occur when both images are of the same (or very similar) height, width and file sizes.

Rollovers will not work if they are placed inside other articles or objects. To have a working image rollover the image must be inserted onto the page or Masterpage as a separate object.

To create an Image Rollover:

• Upload two images seperately into the Image Manager.
• Select the radio button next to one of these images - this will be the original image that will appear on the page.
• Click 'Edit' in the Manager Options menu to load the Image Details.

Above the 'Save' button is 'Rollover File'.

• Select the 'Pick' button. Browse the Image Manager to locate the image that will appear when the mouse cursor moves over the original image. Above each image in the Image Manager will be a 'Pick' button. Select this to choose the image.
• If you know the ID number of the rollover image, instead of selecting 'Pick' you may type this number in the text box.
• When an Image ID number (not the number zero) is in this text box, select 'Save'.

The Image Rollover has been made. To preview it, select the radio button next to the original image and click 'View' in the Manager Options menu.

An example of an Image Rollover is below. Move your mouse over the image to see it change: