Netagi Aplinx User's Manual : Image Gallery

How to

Access Gallery Manager
Add a Gallery
Change Gallery Settings
Add / Edit Images in a Gallery
Place a Gallery onto a page/Masterpage

Example Image Gallery

The following is an example gallery, containing five images. Click on the smaller images to view their respective larger version.

Accessing Gallery Manager

To access the Image Gallery you must be logged in with the administrator toolbar visible at the top of the screen.

From the administrator toolbar, select the button to load the content menu on the left of your screen.
In the tools menu select 'GALLERY'.

The Gallery Manager will load. All galleries currently in your website will be shown here.

Gallery Manager

If you have just added or altered the settings of a gallery, it will appear highlighted.

Add A Gallery

To add a new gallery to your website, access the Gallery Manager (as described above) and select ADD GALLERY from the Manager Options Menu on the left of the screen.

You will then be presented with the Add New Gallery screen (image at right). On this screen, you should:

Give the new gallery a name in the TITLE text box
Define the size of thumbnail images that will appear in the gallery. In the example gallery at the top of this page, a height and width of 50 pixels has been used. To define this, 50 was entered into both the Thumbnail Width and Height text boxes.
Define the size of the large image - known as the Viewing Area. In the example gallery shown at the top of this page, a height and width of 100 pixels has been used. To define this, 100 was entered into both the Viewing Area Width and Height text boxes.

Please Note: When images are uploaded to an image gallery, if the original image is NOT the same as the dimensions you have given here, some resizing of the image will occur. This is done automatically, so that all images fit into the defined size parameters.
- As an example, the images used in the sample gallery shown at the top of this page were originally 250 pixels wide and 210 pixels high. When uploaded, they have been automatically converted to be no larger than 100 pixels wide or high. For the large images, no cropping of the image will occur, only resizing. In such a situation, an image's longest side will be made into the width or height you have defined, then the other side will be adjusted in direct proportion (so as not to skew the image). This is done so that all of the larger image appears in the finished slideshow.
- Secondly, when an image is uploaded, the accompanying thumbnail image is created automatically to fit into the size you have defined. If the height and width of the defined thumbnail size is not to the same proportions as the image you upload, some cropping of the image may occur. Please see Thumbnail Cropping below for more information.
To define your own next and previous buttons, select the PICK button next to the image that you wish to alter and browse the Image Manager of your website. For more information on uploading images for this purpose, please refer to the Images section of this manual.
Default Next and Previous buttons will be used as required if you do not wish to define your own. The default next and previous button images are:
Previous
Next
Previous not available
Next not available
Styles may be applied to the Text (description and title) that is displayed in each gallery. To select a style for each (title and description) click the PICK button next to the respective Style text box. This will open the Style Manager, where you can browse the existing styles that are in your website. For more information on creating a style or using the style manager, please refer to the Style Manager section of this manual.
Styles may also be applied to the thumbnail images (both active and inactive thumbnails) in the same manner.
Thumbnail Rows and Thumbnail Columns defines how many thumbnails should appear in the gallery at once. In the example shown at the top of this screen, 1 has been entered into the Thumbnail Row text box and 3 in the Thumbnail Column text box. This creates a single row of three thumbnail images to be shown at a time.
Thumbnail Scroll Orientation: When set to 'Horizontal' thumbnail images will be scrolled through in a left to right manner. Selecting 'Vertical' causes the scroll orientation to move up / down. Please note: dependant on which method you select, the next and previous images may need adjusting to suit. Default next and previous images have been designed for Horizontal scrolling through the thumbnails.

Thumbnail Cropping: As explained above, when an image is uploaded, the accompanying thumbnail image may be cropped in order to fit into the thumbnail size you have defined.
In the example gallery above, thumbnail cropping has occured on all images because the defined gallery size was square, and the original uploaded images were rectangular (wide).Image cropping in this example has been made on the default setting - Keep Center - whereby, the image has been cropped from all edges evenly, to create the thumbnail.

Thumbnail:		This thumbnail image has been cropped from the center, to fit into an area of 50 pixels square.
Gallery Image:		The accompanying gallery image has been resized, so that the longest side is equal to the length defined in the gallery settings. No cropping of the image has occured.

To alter the positioning of thumbnail cropping, select the desired option from the Thumbnail Cropping select list. (Choosing Keep Left Edge will cause cropping to occur on all other edges as required.)

Please Note: If you wish to avoid any cropping of images, please ensure the images you upload to the gallery have the correct height and width proportions (as defined in the gallery settings).

Layout Type: This section determines where thumbnails and scroll buttons appear in relation to the larger gallery image. You must select one of the options in order for the gallery to function correctly. There are four default layouts recommended, or if you are an advanced user (with HTML knowledge) you may design your own (explained below).
Each of the default layouts is shown below:

Thumbnails on the Left:
Thumbnails on the Right:
Thumbnials at Top:
Thumbnails Below:

For Advanced Users (with HTML knowledge), you will require the following code:

<gallery_current_image /> This code should be used where you wish to show the Current Gallery Image
<gallery_thumbnails /> This code should be used where you wish to show the array of thumbnails
<gallery_previous /> Calls the Previous and Previous not available button image
<gallery_next /> Calls the Next and Next not available button image
<gallery_title /> When appearing in a gallery, this code represents the location of the active image's title.

<gallery_description /> When appearing in a gallery, this code represents the location of the active image's description.

The following code was used to create the example gallery shown at the top of this page:

<table border="0" width="200px">
	<tr>
		<td valign="top" align="center" colspan="3">
			<gallery_current_image />
		</td>
	</tr>
	<tr>
		<td valign="middle" align="left">
			<gallery_previous  />
		</td>
		<td valign="top" align="center">
			<gallery_thumbnails />
		</td>
		<td valign="middle" align="right">
			<gallery_next />
		</td>
	</tr>
	<tr>
		<th colspan="3">
			<h3><gallery_title /></h3>
		</th>
	</tr>
	<tr>
		<td colspan="3">
			<gallery_description />
		</td>
	</tr>
</table>

Please Note: All of the field codes are required in order for a Custom Gallery object to function. You may hide some using a style - display:none - however this is not recommended.

Change Gallery Settings

Gallery Settings include all of the information that can be defined in the initial creation of each Gallery object. After a gallery has been created, you may alter these settings again at any time. To do this:

Access the Gallery Manager
Select the radio button next to the ID number for the gallery object you wish to alter
Click EDIT GALLERY from the Manager Options Menu on the left hand side of the screen.
This will open up the same screen used to add the gallery (see above).
When all changes have been made, select the SAVE button at the bottom of the screen.

Please Note: If you alter the height / width of images or their thumbnails in the Gallery settings, this will NOT affect any of the images currently existing in the Gallery. Only images that are uploaded after these changes have been saved.

Add / Edit Images in a Gallery

Add New

To add a new image to a gallery:

Select the radio button next to the ID number of the gallery you wish to add an image to.
Click ADD IMAGES from the Manager Options menu on the left of your screen.
You will be presented with the ADD IMAGE screen, as shown below:
Give the image a TITLE and DESCRIPTION (description is not mandatory) then click browse to locate the image.
Clicking Browse will open a file upload window on your computer. Locate the image you wish to upload by browsing on your local computer and click open.
Finally click SUBMIT to save this image to the gallery.
Upon successful uploading of a new image, you will be shown all of the existing images in the gallery (see View/Edit below).

View/Edit

To view images in a gallery:

Enter the Gallery Manager (as described above in Accessing Gallery Manager).
Select the RADIO button next to the ID number of the gallery you wish to view.
Click the VIEW IMAGES button from the Manager Options Menu on the left of the screen.
Please Note: If no images are present in the gallery, the page will be blank. Please refer to Add New (above) to add the first images to the gallery.
When at least one image has been added to a gallery you will be presented with a vertical list similar to the one shown in the example below. This is a list containing each of the image thumbnails - the same size as they currently appear in the gallery.
To VIEW an image at full size, click on that picture's thumbnail version. The full size image will load in a new window.
To EDIT an image (this includes its name, description or photo) that already exists in the gallery select the EDIT button next to that picture's thumbnail image. You will then be shown the Add/Edit Image screen (see image above).
If you wish to remove an image from the gallery, click the DELETE button next to that image.

Moving or Rearrange Images in a Gallery

When an image is added to a gallery, it will automatically appear at the bottom of the list. If you wish to rearrange the order in which the gallery's images appear, you should use a 'drag and drop' action as follows:

Left click on the image you wish to move
Hold the mouse button down and drag the image into the desired location
When you have finished rearranging the images, please click SAVE at the bottom of the screen.

The animation (below) shows movement of Gallery Image number 4.

Placing a Gallery onto a page or Masterpage

In order to place a Gallery onto a page or Masterpage, you should be logged in with the administrator's toolbar visible at the top of your screen.

Go to the page/Masterpage where the gallery is to appear and click the respective 'Edit This Page' or 'Edit this Masterpage' button in the admin toolbar.
Click on the button in the section where you wish the gallery to be.
The Insert Content window will load.
Select Gallery from the bottom right hand column to select from all existing galleries.
The Gallery Manager will load, showing all existing galleries.
Click the INSERT button next to the ID number of the gallery you wish to place on the page or Masterpage.

If you wish to have a seperate page for additional gallery objects, or even multiple galleries on a single page, repeat this process for each.

To view the gallery in its final format, simply preview the page.

User's Manual

Gallery

Short Description

Please Note: Images added to the Gallery Object do not appear in the Image Manager, and vice versa. If an image is intended to appear in an article, or as a stand alone object on a page or Masterpage, it is recommended that you add the image to the Image Manager.