Web Development

Photo Gallery With Thumbnails

This pagetype allows you to build a gallery with thumbnails.

  1. What does this look like?
  2. How do I add this pagetype to my site?
  3. How do I add images to my photo gallery?
  4. How do I get thumbnails to show up in my photo gallery?
  5. How do I set the caption and description for my image?
  6. How should I resize my images?

1. What does this look like?

Image Gallery with Thumbnails

[back to top]

2. How do I add this pagetype to my site?

  • From the New menu in the top of the page, find the 'New Gallery' item for your site.
    Create New Gallery
  • Change the System Name to a url appropriate name.
  • If necessary, change the Parent Folder to the folder you want the photo gallery page to exist in.
  • Click Submit

[back to top]

3. How do I add images to my photo gallery?

  • Select the 'full' folder in your gallery.
  • Import an image from your desktop into the 'full' folder.
  • All images in the 'full' folder will be used in the photo gallery.

[back to top]

4. How do I get thumbnails to show up in my photo gallery?

  • For each image in the "full" folder, there must be a corresponding image in the "thumb" folder.
  • The System Name (filename) of the image in the "thumb" folder must match exactly that of the corresponding image in the "full" folder.
  • Thumbnail images should be 75x75 pixels.  See more on Image Sizes.

[back to top]

5. How do I set the caption and description for my image?

For each image in the 'full' folder of your gallery, do the following

  • Select the image
  • Click the Edit tab
  • Select Metadata under the Edit tab
    Image Metadata

The caption(s) for this image is determined as follows

  • Caption
    • Display Name: If there is text in the Display Name field, then it is used as the Caption
    • Filename (System Name): If Display Name is blank, then the filename, without the extension, (e.g., reunion1) is used as the label.  (You can change the System Name, in the System option.  **Be sure to unpublish the file before you change the name.)
  • Description
    • Summary: If there is text in the Summary field, then it is used as the description.

[back to top]

6. How should I resize my images?

[back to top]