To add a Gallery to a page with a number of photos on it:
First, resize your images roughly to 800 x 600px @ 72dpi.
To get better Google ranking, name your images with your preferred google search word. The name will also be the caption to the image.
For more on images and resizing them, see here.
Add a Gallery Module to the page
- Create or Edit a page you want the Gallery on.
- Select the Add-on Module
- Select Gallery under Available.
- Select 'Make this page a Gallery' and fill out the form. SAVE
- Select: Back to page set up. (red button below form).
To place the images in the Gallery
- Click onto the ‘insert an image icon’ in the tool bar to upload your images.
- Click onto the icon to the right of the source window (looks like an arrow upload icon).
- In the File Manager open the ‘gallery’ folder.
- Open the folder with the 'page name' you want to add or delete images too. It should have been created automatically.
- Upload your images into that folder.
- Click out (x) of the File manager and Save it.
Check it out!
- Save Page and view the page through the ‘eye icon’ on the top right.
- Go to Page List on the menu on the left hand side. Click the button on the top right that says Empty cache. Empty Cache.
- View your page live.
NOTE: The Gallery will not show in the admin area, only on the live site.
To replace, delete or rename images into your galleries:
First, resize your images roughly to 800 x 600px @ 72dpi. To get better Google ranking, name your images with your preferred google search word. The name will also be the caption to the image.
For more on images and resizing them, see here.
- Go to the page you want to add images to. The Gallery will not show in the admin area, only on the live site.
- Click onto the ‘insert an image icon’ in the tool bar.
- Click onto the icon to the right of the source window (looks like an arrow upload icon).
- In the File Manager open the ‘gallery’ folder.
- Open the folder with the 'page name' you want to add, delete or rename images too.
- Upload, delete or rename images
Select ‘Upload’ (top left hand icon up arrow). Search for the files on your computer add/upload them.
Delete any files in the gallery page folder by selecting the image (will show with a blue highlight) and use your mouse right click > select Delete file
Rename any files in the gallery page folder by selecting the image (will show with a blue highlight) and use your mouse right click > select Rename file
- Click out (x) of the File manager and Save it.
- Unfortunately you cannot see the gallery thumbnails on the page editor or in the preview mode.
- Save Page and view the page through the ‘eye icon’ on the top right.
- Go to Page List on the menu on the left hand side. Click the button on the top right that says Empty cache. Empty Cache.
- View your page live.
Single thumbnail image
To hide the majority of thumbnail images and show only 1 or optional amount.
The remaining images in the gallery folder will appear in the slide show view.
In Add-on Module > Gallery
Thumb dimensions (sq): 900 this will fill the width of the main content
Select Single gallery page: 1 (or optional amount). SAVE
In your File Manager / Gallery / Page name. Add a starter image (900px wide) with graphic and 'Click Here' or 'To view xx click here' text. Name that image '000_View slideshow here'
Thumbnail images looking blurry?
If the gallery image thumbnails look blurry and pixelated is use the refresh thumbnail option under the Gallery module > Thumb dimensions (sq).
This happens when the when the thumbnail dimension is changed after the gallery images have been loaded. Gallery image thumbnails will default to 100 x 100px, they need to be refreshed if the thumbnail dimension are changed.
To centre a gallery in middle content
On the page you want to centre the gallery:
- Go: 'Extra features'
- Paste the following code under: Style & Functionality
Page Styles: .col-12 col-sm-4 hidden-print {display:none;} /* this will delete the right hand column on the page*/
Page Scripts: jQuery("#content-top").append( jQuery("#content") ); /* this will centre the thumbnails on the page*/
- SAVE
Below is a real live Gallery in action.
In Main Content, copy can be added above the preview/thumbnail images, as show in this example.
It is advised that you add the instructions below, so that first time users will know to click on the preview images.
"Click on a thumbnail preview below to see larger view of image."
Gallery is loading. Please wait. Javascript will need to be enabled to view it.