Image Galleries

Site Studio has extensive support for creating photo galleries for the web. The Image Controller and Image Viewer components feature advanced functions for creating stunning photo galleries.

Importing images

Importing images for photo galleries is really easy using Site Studio. Simply open the Resources dialog, select the folder you wish to place your images in and press "Import files to folder...". Select the images you wish to import from your hard drive or any other device and press "Open".

When importing the images, the Import Options for Images dialog will be displayed, which allows you to decide if you wish to reduce the size of the images by allowing you to enter the maximum width and height. This is very useful when importing images from a digital camera, since they normally are too large to display on the web. You also have an option to create thumbnails, which can be used by different photo gallery componentes to display an overview of the images you wish to display.

Thumbnails can always be regenerated at any time, using the context menu in the Resources dialog. Note: Only images with thumbnails will be displayed in the photo galleries even if the thumbnails are not explicitly used by the photo gallery components.

Editing images

Image resources can be altered to fit your needs for the photo gallery you want, or simply for displaying in a document. From the context menu to the right you can perform the following actions on the selected image(s).

Rotate 90° CW

Rotates the selected image(s) 90° clockwise

Rotate 90° CCW

Rotates the selected image(s) 90° counter clockwise

Flip Horizontal

Flips the selected image(s) horizontally.

Flip Vertical

Flips the selected image(s) vertically.

Make Grayscale

Removes all color information from the image(s) and turns them into black and white.

Reimport image...

This function can only be made on one image at a time. It allows you to replace the existing image in the resource folder with a different one, but keeping the attributes such as the title, the description and the tool tip. By selecting this option, the Import Options for Images dialog will be opened.

Rebuild Thumbnails...

This option allows you to rebuild the thumbnail(s) for the image(s) you have selected. This is very useful when working with photo galleries. The settings for the new thumbnail(s) is made in the Rebuild Thumbnails dialog.

Components

Here follows a brief description of photo gallery components. Click the headings of the components to read more detailed information on each specific component.

Image Viewer

The Image Viewer is the main photo gallery component. Without an Image Viewer no other photo gallery components will function. The Image Viewer owns a list of images, in the form of a resource folder, which other Image Controller components utilize for their functionality.

The basic functionality of the Image Viewer is to display an image with an optional frame, but it also has functions for running all images in a slide show.

Image Remote Control Buttons

The Remote Control Buttons works as a menu for the images being displayed. It has up to 12 configurable buttons which can send commands to the Image Viewer such as; Previous, Next, Play, Stop etc.

Use the Remote Controller Buttons when you want buttons to control the Image Viewer and other controllers listening. See example on the right. The versatility of this component is very extensive!

Image Text

This component is used to display text for the image currently being displayed in the photo gallery. The text displayed can contain special keywords which will be replaced by the component. The keywords are referring to properties of the current image and also general properties about the photo gallery, such as the total number of images.

An Image Text Component displaying the title and the image

count and another one below it using a different style showing the

description for the image.

Image Thumbnail Panel

The Image Thumbnail Panel displays a matrix of thumbnails. It allows for a good overview of the images. It has many properties for a variety of functions in which to display the thumbnails.

An Image Thumbnail Panel using a black frame

with shading.

Image Thumbnail Slider

The Image Thumbnail Slider is a component which displays thumbnails and slides the current one into a specified position. Different frames can be used for the selected image and the other ones.

An Image Thumbnail Slider with Image Remote Control Buttons

on the sides.