Create a basic photo gallery

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Using this module you can create a collection of images that are located in a common folder.When inserting the photo gallery module into a page the system will basically insert resized thumbnails of your images and apply a lightbox effect. The thumbnails are sorted by file name alphabetically.

Using the photo gallery module consists of the following steps:

  1. Create the folder the gallery's images will be stored into and upload the images
  2. Create a photo gallery module and select the folder created at step 1
  3. Insert the module in a page

Note: This feature is available in the partner plan.

Create a photo gallery module

  1. Create a folder the gallery will pull images from and upload your images. For more details on how to create the folder and upload the images to your site see How to upload files to your site.
  2. Create the photo gallery module by selecting Modules > Photo Galleries and clicking Add Photo Gallery.
  3. Specify a name for the gallery module, select the folder containing your photos, and click Save.
Business Catalyst creates a reusable module that you can add to one or more pages in your site.

Insert the photo gallery in a page

  1. Open the page in editing mode by selecting Site Manager > Pages, and clicking the page in the tree view
  2. Place the cursor in the content editor where you want to insert the photo gallery
  3. In the Modules tab of the Toolbox found on the right of the editor, select Photo Galleries
  4. Select your photo gallery from the list.
  5. Optionally, before inserting the image you can click Customize and adjust the properties of the thumbnails
  6. Click Insert.
    Business Catalyst inserts a placeholder tag representing the module. When you publish the page, the module replaces the placeholder tag.
  7. Click Publish or Save Draft.

Add captions to your photo gallery

You can include captions with the full-size photos in the gallery.
  1. Select Modules > Photo Galleries, and click the photo gallery in the list.
  2. Click Manage Items and enter a caption for each photo in the Description text box.
  3. Click Save Item after entering each description.

Getting the gallery's XML feed

A neat feature of the photo gallery is the XML feed. The system generates an .xml file that contains your gallery's items including the path the images are stored at and the image caption.

To generate this file go to the gallery's details panel and click the Generate XML feed option under the "Actions" button. This popup will appear containing the link to the file:

Using this XML file you can create your own lightbox or process it using jQuery to create your own implementation. We have this covered in Creating a custom jQuery powered Photo Gallery .