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 make a Gallery 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.

  1. Create/edit a new page. SAVE
  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).
  6. Click onto the ‘insert/edit image icon’ in the tool bar to upload your images
  7. Open the ‘gallery’ folder
  8. Open the folder with the 'page name' you want to add or delete images too. It should have been created automatically.
  9.  Upload your images into that folder. 
  10. Click out of the Responsive Filemanger and OK it.
  11. Save Page and view the page through the ‘eye icon’ on the top right.
  12. 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.
  13. View your page live.

NOTE: The Gallery will not show in the admin area, only on the live site.

To place or delete 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/edit image icon’ in the tool bar. Next to ‘source’ click on the camera icon on the right hand side.
  3. Open the ‘gallery’ folder.
  4. Open the folder with the 'page name' you want to add or delete images to.
  5. To Upload all your images or delete them.  
    Select ‘Upload’ (top left hand icon up arrow). Add files or  Drag & Drop files or click in the area displayed (modern browsers) and select the file(s). Start Upload   When the upload is complete, click the ‘Return to files list’ button.
  6. If you want to reorder the images on the gallery page, change the names in the Responsive Filemanager. They will order numerically and alphabetically.
  7. Click out of the Responsive Filemanger and OK 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.

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 -