Create a Photo Gallery

1. In the LiveWhale dashboard, go to the Galleries tab.

2. Select the blue + Add a new gallery button. A blank Add a new gallery window will open.
Blank Gallery Form

3. Select which images you’d like to use from the column on the right, or add new images from your computer.  

4. Add captions for each of the images. Captions are used for accessibility compliance.

5. Enter a title and a description. Titles are mandatory, but descriptions are optional.

6. Add Tags if desired.If you’d like a fullscreen gallery to automatically rotate to the next image after 10s, tag the gallery with “autoplay.” 

7. Mark it Live before you save, or you can also mark it Live after it’s been saved.

8. Select groups with which you’d like to share the gallery, if applicable.

9. Select the globe icon if you would like other groups to link to your gallery.

10. The first image in the gallery will default as the gallery cover image unless you specify otherwise.

11. Once the gallery is saved—and marked Live—you can display it on a web page using the My Photo Gallery widget or the various slideshow options in the Widget menu in the page editing toolbox. See a sample of galleries rendered on a page here.

Add a Gallery to a Faculty Profile Page

For information on adding a gallery to your profile, view the faculty help page.

Add a Gallery to a Page and Gallery Types

Carousel Gallery

1. Navigate to an editable area and click the red plus button.

2. Select Slideshow, and select the gallery you wish to display.

3. Choose the gallery style “Carousel” from the dropdown in the upper left.

4. Select the blue Insert this slideshow button.

This displays a carousel gallery with a caption for each image, and arrows to click to the previous/next images.

Winter Scenes

  • Campus Winter 003

    Main Plaza buried in snow.

  • Students with Colorful Snowman

    Students show off their colorful snow person on the Great Lawn.

  • Winter Campus Scene 1

    The big green clock in front of Student Services.

  • Winter Campus Scene 2

    The Main Plaza.

  • Snow Day Big Haus

    Snow Day near Big Haus.

  • Students in Snow

    Snowy selfies on campus.

Slideshow Gallery

1. Navigate to an editable area and click the red plus button.

2. Select Slideshow, and select the gallery you wish to display.

3. Choose the gallery style “Slideshow” from the dropdown in the upper left.

4. Select the blue Insert this slideshow button.

Hint: For the slideshow, all images in the gallery should be roughly the same dimension. Galleries with different photo dimensions are best displayed using the My Photo Gallery widget. 

The area on the page reserved for a slideshow gallery is dictated by the photo with the largest height dimension. If a large area of additional white space appears under your photo gallery, it’s likely due to a portrait scale image in your gallery. Either make the vertical image your cover or eliminate vertical images entirely. You’ll see an example of this below. The white space that appears below the gallery is due to the second photo which is vertical.

Winter Scenes

  • Campus Winter 003

    Main Plaza buried in snow.

  • Students with Colorful Snowman

    Students show off their colorful snow person on the Great Lawn.

  • Winter Campus Scene 1

    The big green clock in front of Student Services.

  • Winter Campus Scene 2

    The Main Plaza.

  • Snow Day Big Haus

    Snow Day near Big Haus.

  • Students in Snow

    Snowy selfies on campus.

Fullscreen Gallery

1. Navigate to an editable area and click the red plus button.

2. Select Widget, and then select the My Photo Gallery widget.

3. Select the blue Insert this slideshow button.

This will display a random gallery from the current group. The gallery opens fullscreen when clicked.

Advanced Instructions

Do not attempt to change source code unless you are comfortable with manipulating HTML. Please contact webdev@purchase.edu for help.

To display a specific gallery like this, you need to change the widget arguments.

Go to Galleries and find the gallery ID, listed beneath the gallery title. Then add the ID argument to your widget, and change “12” to your gallery ID: 

<widget id="56_my_photo_gallery">
 <arg id="group">School of the Arts</arg>
 <arg id="filter" name="id" action="equals">12</arg>
</widget>

If you’d like a fullscreen gallery to automatically rotate to the next image after 10s, tag the gallery with “autoplay.”

Crop Images in a Gallery

You can crop the slideshow or carousel images by setting the following widget arguments using the source code button: 

<widget type="galleries_inline">
 <arg id="image_width">400</arg>
 <arg id="image_height">400</arg>
</widget>

Auto Advance Images in a Slideshow

To auto-advance the images by themselves, use the source code button to add the autoplay class. For example: 

<widget type="galleries_inline">
 <arg id="id">34</arg>
 <arg id="type">carousel</arg>
 <arg id="class">autoplay</arg>
</widget>

This displays a gallery that automatically scrolls through all the images. 

<widget type="galleries_inline">
 <arg id="id">1</arg>
 <arg id="type">carousel</arg>
 <arg id="class">autoplay</arg>
</widget><widget type="galleries_inline">
 <arg id="id">1</arg>
 <arg id="type">slideshow</arg>
 <arg id="class">autoplay</arg>
</widget>