skip to main content

MODULE

Gallery

A Gallery module is one of the simplest ways of presenting a number of images on your website. When a user clicks on the thumbnail/preview image, that picture opens up in a larger format as the website fades in the background. The user can then scroll through the images in a slideshow format or go back to the preview screen. The Gallery module will automatically create the preview images.

 

Gallery Page

Full image after user clicks onto Preview image.

 

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

  1. Create or Edit a page you want the Gallery on.
  2. Select the Add-on Module
  3. Select Gallery under Available.
  4. Select 'Make this page a Gallery' and fill out the form. SAVE
  5. Select: Back to page set up. (red button below form).

To place the images in the Gallery

  1. Click onto the ‘insert an image icon’ in the tool bar to upload your images.
  2. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  3. In the File Manager open the ‘gallery’ folder. 
  4. Open the folder with the 'page name' you want to add or delete images too. It should have been created automatically.
  5.  Upload your images into that folder. 
  6. Click out (x) of the File manager and Save it.

Check it out!

  1. Save Page and view the page through the ‘eye icon’ on the top right.
  2. 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.
  3. 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.

  1. Go to the page you want to add images to. The Gallery will not show in the admin area, only on the live site.
  2. Click onto the ‘insert an image icon’ in the tool bar.
  3. Click onto the icon to the right of the source window (looks like an arrow upload icon).
  4. In the File Manager open the ‘gallery’ folder
  5. Open the folder with the 'page name' you want to add, delete or rename images too.
  6. 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 

  7. Click out (x) of the File manager and Save it.
  8. Unfortunately you cannot see the gallery thumbnails on the page editor or in the preview mode.
  9. Save Page and view the page through the ‘eye icon’ on the top right.
  10. 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.
  11. 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'

 

 

To centre a gallery in middle content

On the page you want to centre the gallery:

  1. Go: 'Extra features'
  2. 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*/
  3. 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."

 
 
 
 
+ Text Size -