An image gallery can be added to a page when you wish to display multiple images. In this tutorial, we will outline how to create an image gallery and change its appearance to suit your needs.

The example below shows an image gallery with 250px wide thumbnails and multiple pages. 

Clicking on an image thumbnail from the gallery grid will open that image in a full-width lightbox display with an image description. In the full-width display, the user can also click to advance through the rest of the gallery.

1. Copy the entire “RENAME-ME-gallery” folder from “_shared-blocks/listings” into a publishable section of your site. Do NOT place it inside of a “_content” or “_blocks” folder.
2. In the Site Content window on the left, browse to your site and the “RENAME-ME-image-gallery” folder that you just created. Rename this folder to an appropriate name for your gallery. Example: “speaker-series-gallery”. 
3. Inside the gallery folder, rename the gallery-index block "rename-me-gallery-index" to match the gallery folder. Example: “speaker-series-gallery-index”.

The location of the gallery index and configuration blocks is very important. DO NOT move them from their original locations. 

The gallery index-block must remain in the gallery containing folder (OUTSIDE of "all-gallery-images"):

The gallery-configuration block must remain inside the all-images folder with the image files:

1. Navigate to the page where you want to add the Image Gallery
2. In the top toolbar of the page, select: Edit > Configure tab
3. Scroll down to find the numbered Region you want to add content to
4. Select the Region to display content in
5. Click "Choose Block". In the window that appears on the right-side of the screen, you will see three tabs: Recent, Browse, and Upload.
6. Click "Browse" and then select your image gallery index block.
7. Click the "Choose" button.

1. In the same Region, select "Choose Format"
2. Choose the content format by selecting: Browse > JMU > _shared-formats > listings > image-gallery
3. Click the "Choose" button
4. In the verticle ellipsis, select "Check Content & Submit". Refresh your page and verify that your image gallery is functioning (if you haven’t added your own images, you should see the three placeholder images of campus).

Images can easily be added to your image gallery by placing them inside your gallery folder. Note: this is the SAME folder where the “_gallery-configuration” block is located. Any images placed inside this folder will be used in your gallery.

To remove the placeholder images, simply delete them.

The gallery grid that appears on your page can be adjusted by editing the “_gallery-configuration” block:

Max Number of Rows: This is the maximum number of thumbnail image rows that will appear on a page. For larger image galleries, you may wish to keep this number small and allow your gallery grid to have multiple pages.

Image Size: This is the image size in pixels of the image thumbnail that appears in the grid. The larger the image size in your grid, the fewer images will be displayed in each row of your gallery grid. We recommend keeping thumbnails 200px or larger.

When you click on an image in the gallery grid, it will open up full width on your page and display an image description at the bottom. To edit the image description that displays:

1. Open the image in Cascade.
2. Click “Edit”.
3. Type the description on the “Title” field and save the image.
4. Republish the image(s) AND the page where your image gallery appears.