How to add an image gallery

There are 3 types of image galleries you can add to a page:

Inline gallery

  • koala_240x175
  • penguins_240x175
  • jellyfish_240x175
ArrowsArrows




An Inline gallery will display in a click-through module that will scroll through up to 5 images. This is the most simple image gallery and it's the easiest to set up.

Learn how to add an inline gallery.




Modal gallery

A Modal gallery displays an image thumbnail in the center of the page. When clicked, it opens up a lightbox-style image viewer where the user can then click through each image.
Learn how to add a modal gallery.

Media box galleries

A Media box gallery is displayed on the bottom of a page. When clicked, it will also open up a lightbox-style image viewer. Multiple image galleries can be added to a single Media box, as well as videos.
Learn how to add a media box gallery.

media_box_sample

Related step-by-steps

Adding an inline gallery 

  1. When in the "Edit" mode for a page, create a new Page Content area and select the “Gallery” Content Type. The Gallery type will default to "Inline."
  2. inline_selection
  3. Click the Image icon. image icon 
  4. Upload your image or navigate to an image within the Library and double click the image's file name, or select “Add Library" to add the image to the gallery.
    add library 
  5. Continue to add up to 5 images in this manner. When you've finished, click "Publish." publish icon

Adding a modal gallery

Creating the image gallery

Watch the eLearning on how to create a modal gallery.
CreateModalGalleryeLearningThumbnail-220x170
  1. First, you'll need to create an Image gallery. Navigate to the “_Shared” folder of the department site, or if your site has the "_Media" folder, navigate there.
    _shared folder OR  _media folder 
  2. Within either the "_Shared" or "_Media" folder, create a new folder titled “Galleries”
    galleries2
  3. Within the "Galleries" folder, create a new folder with the title for your image gallery.  You will create a new folder for each gallery you add to the site.
    sample image gallery 2
  4. Create a "New Image Gallery" smart form.
    new_image_gallery
  5. Enter the gallery title in the "Title" and "Gallery Heading" fields.
     gallery heading 
  6. Select a Preview Image to upload.  This is the image that will serve as the cover photo for the gallery on the bottom of the page. The dimensions of the image must be 170x120 px. preview image 
  7. Select an image upload method. You can choose to "Select images one at a time" or "Bulk upload with picasa." 
    Image upload method
    If you use the Picasa bulk upload feature, simply paste the link to the Picasa album in the provided field and publish the page. If you're uploading images one at a time, continue following these directions.
  8. Enter an "Image Title." This text will not be displayed beneath the image. If you would like a caption beneath the image, fill out the "Image Description" field.
    Image title-description
  9. Click the Image Upload icon. image icon
  10. Upload your image to the gallery's folder.
  11. Continue to add images to the gallery and click the "Publish" icon publish icon.

Adding the modal gallery to a page

Watch the eLearning on how to add a modal gallery directly to your web page.
AddtoModalGallery-220-170
  1. Navigate back to the page you want to place the gallery on and click "Edit." Create a new Page Content area and select the "Gallery" Content type, and the "Modal" Gallery type.
    Modal gallery
  2. Click the Gallery Upload icon and navigate to the Image Gallery you created. Select it and click OK.
    Gallery upload
  3. Publish the page. Your modal gallery will now display in the center of the page.

Adding media box galleries

Creating the image gallery

  1. First, you'll need to create an Image gallery. Navigate to the “_Shared” folder of the department site, or if your site has the "_Media" folder, navigate there._shared folder  OR  _media folder 
  2. Within either the "_Shared" or "_Media" folder, create a new folder titled “Galleries”
    galleries2
  3. Within the "Galleries" folder, create a new folder with the title for your image gallery.  You will create a new folder for each gallery you add to the site.
    sample image gallery 2
  4. Create a "New Image Gallery" smart form.
    new_image_gallery
  5. Enter the gallery title in the "Title" and "Gallery Heading" fields.
     gallery heading 
  6. Select a Preview Image to upload.  This is the image that will serve as the cover photo for the gallery on the bottom of the page. The dimensions of the image must be 170x120 px. preview image 
  7. Select an image upload method. You can choose to "Select images one at a time" or "Bulk upload with picasa." 
    Image upload method
    If you use the Picasa bulk upload feature, simply paste the link to the Picasa album in the provided field and publish the page. If you're uploading images one at a time, continue following these directions.
  8. Enter an "Image Title." This text will not be displayed beneath the image. If you would like a caption beneath the image, fill out the "Image Description" field.
    Image title-description
  9. Click the Image Upload icon. image icon
  10. Upload your image to the gallery's folder.
  11. Continue to add images to the gallery and click the "Publish" icon publish icon.

Creating the media box

  1. Next, you'll need to create the Media Box for the gallery(s). Navigate in the CMS Folder Structure to the "Galleries" folder of your site.
  2. Create a new “Media Box with Video" smart form.
    new media box with video 
  3. In the "Title" and "Media Box Title" fields, enter "Galleries."  
    galleries 
  4. In the Gallery Description field, enter in a title for your gallery.
     gallery description 
  5. Click the "Add Gallery" folder icon. folder icon 
  6. Navigate to your image gallery and select OK. You can add up to 4 image galleries by selecting the blue notepad icon and choosing to Insert Above or Below.
    insert above below 
  7. Click the “Publish” icon. publish icon 

Attaching the media box to the page

  1. Select the page you want the media box to appear on and click "Edit."
  2. Scroll to the bottom and check the box that says "Media box options."
    Media box options
  3. Leave "Hide Media Box?" unchecked. Click the folder icon and navigate to the Media box smartform you created in the previous step. Select it and click OK.
    Media box selection
  4. Publish the page. Your media box will appear at the bottom of the page with the attached galleries.


previous  
next