banner image
GetSimple... All you need in a CMS and nothing you don't !
Home  ›  Workshop  ›  Tutorials  ›  Creating a Gallery with the i18n Gallery Plugin

Creating a Gallery with the i18n Gallery Plugin

The following tutorial will guide you through setting up a lightbox enabled photo gallery for your GetSimple website. Two plugins i18n Gallery and Imagizer will need to be installed. Imagizer is used to pre-process images to a size appropriate for a web based gallery and i18n Gallery to produce the gallery itself.

i18n Gallery Plugin demonstration gallery...  i18n Gallery Example

The screenshots below take you through the gallery creation process... By clicking on the relevant screenshot you can view a full screen sized version of it.

Preparing Your Gallery Images

Any photos uploaded directly from a camera could be greater than 8x the size required for a web photo gallery. Using such large images wastes both disc space and bandwidth so they should be pre-proccessed to a smaller size.

The Imagizer plugin can automatically process each uploaded photo by resizing, cropping or compressing it to a predetermined size and apply a watermark if required.

To access Imagizer... When logged into the GetSimple Administration go to the Files tab. Select Imagizer on the RHS menu.

Imagizer will resize all images above a preset size so that their largest dimension - in either width or height - is equal to the preset size. In this case 800px. The plugin will resize any image that is below a preset level as well. If for example you entered 200px in both 'Minimum Size' fields, Imagizer would increase the size of all images below 200px  - in either width or height - to 200px.

Common image sizes for web galleries include... 600px , 800px and 1000px.
Note: The dimensions given refers to a Gallery image's maximum dimension in either height or width.

Remember... Imagizer is always active so bare this in mind every time you want to upload an image and set an appropriate size in Imagizer.

Uploading Your Gallery Images

Note: When you create a folder or upload your gallery images via the GetSimple file manager, all names will have lower case letters, any spaces will be repaced by dashes and any punctuation removed.

Create a folder to hold all your galleries.
The example uses a folder named 'gallery'.
Create a folder within this folder to hold the images for this specific gallery and name it appropriately. In the example a folder called 'along-the-darling-1886' has been created to hold this gallery's images.
Navigate to the folder you have made and select 'Upload files and/or images...' on the RHS menu.

A window will open a allowing you to choose the images on your computer to upload.
You can upload files singly or in multiples.

Note: Adobe's Flash must be installed on your computer for the multiple upload feature to work.

 

Images being choosen for upload to the gallery.

 

Multiple image files in the process of being uploaded.


Your First Gallery

By selecting the Galleries tab you enter Gallery Management. When you access this page for the first time the gallery list will be blank.

 

Before you create your first gallery check the plugin setup... On the RHS menu choose Settings and make sure the details here are correct.
Image dimentions are given in pixels as... width x height

Note: In this example a more up to date version of jQuery is being loaded by the template so it does not need to be loaded here.


Creating a Gallery

Select Create New Gallery
Fill in a Title for the gallery. For this example a gallery has been created titled 'Along the Darling 1886'.

 

To add the gallery images click >> Add images
This will bring up a file management window. Navigate to the folder you wish to add the images from.
In the example's case this is >> gallery/along-the-darling-1886
Click on an image in the file browser to add it to the gallery.

 

After you have added the images close the file browser window.
SAVE the gallery you have just created.


Configuring a Gallery

Click on gallery options at the top to reveal the gallery options setup.
A name for the gallery should have been automatically generated when you saved the gallery.
Select Fancybox from the dropdown menu for image display.
See...   http://fancybox.net/
Enter the dimensions for the gallery thumbnails. Dimensions are given in pixels as... width x height.
When you have entered the thumbnail size click on the area to the right of the dimension entry text-boxes to display the Crop checkbox. Check Crop.
If you have a large gallery you may like to limit the number of thumbnails displayed per page. When you check 'Paging' another text box is displayed enabling you to enter the number of thumbnails shown per page.

That's about all for here. Save your changes.

Note: A gallery can be configured to use PrettyPhoto in much the same way.

You have now created and configured a gallery you need to embed it in a page so it can be viewed. The code needed for doing this can be found under gallery management.

Gallery Management

Select the gallery tab to enter Gallery Management. Here you should find your gallery listed.

Looking at the gallery listing table row, you will find 3 main columns...
Name >> Name of the gallery. Click on the gallery name to enter image management for that gallery.
Code To Include In Page >> This is the code you need to embed the gallery in your page, so take a note of it.
Date >> Gallery creation date.
At the RH end of the row you will see a cross - clicking this cross will delete the gallery.

Gallery Image Management

In Gallery Management click on the name of the gallery to enter image management for that gallery.
The example gallery shown is titled 'Along the Darling 1886'.
From here you can add or delete images from the gallery and if you wish to, add individual image titles* and descriptions.
You can sort your gallery images by dragging and dropping them into the position you want.
Remember to save any alterations or additions you have made.

* The gallery plugin can be modified to automatically use the image's filename as it's title. The plugin that generated the example gallery was modified in this way.

See...   i18n-gallery-plugin-basic-mods.html

Notes:
1: FancyBox will show only Titles displaying them automatically under each main image.
2: PrettyPhoto can show both Titles and Descriptions.

Including a Gallery in your Web pages

Go to the Pages tab and make a new page to show your gallery on.
For the example the gallery page has been titled - 'Along the Darling - 1886'

Edit the page...
The code to include the example gallery copied from Gallery management is...

Now select the Source button in the editor. Enter the include code in the following form into the page and then save the page.


Note: The original code to include the example gallery has been surrounded by a <div> tag.

Select the View button next to Page options button see your finished gallery embedded in the page.

The Results

The gallery embeded in a page.

 

A gallery image displayed using FancyBox.