Creating Photo Galleries & Slideshows

Display multiple photos at once, either as a thumbnail grid or slideshow.

Using Tailor? If you plan to add a photo gallery or slideshow to a page that uses the Tailor page builder, be sure to read all the way to the end of this page.

Photo galleries

Adjust your settings first (highly recommended)

One of the settings we highly recommend activating before you create a photo gallery is “carousel view,” which produces a full-screen browsing experience.

Turning on this setting allows site visitors to click on a photo, view it at full screen, then click through to view other photos in the gallery, then exit out of the gallery and return to the page. This website has carousel view activated, so the gallery in the next section demonstrates how it works.

Important: Skip the section “Enable Jetpack Plugin.” Jetpack is already enabled on WashU Sites. Learn how to activate carousel view »


Standard photo galleries

Standard photo galleries display photos in a thumbnail grid.

Pro tip: Image titles will display when an image is clicked. For example, the football image in the gallery below has the title “danforth-12.” Make sure you either delete each image’s title or edit them to be descriptive and meaningful. A better title for the football image would be something like “WashU Football Game.”

Learn how to create a photo gallery »


Tiled galleries

By default, image galleries are inserted as a thumbnail grid. You can extend the types of image galleries you insert into posts and pages to include tiled mosaic, square mosaic or circular grid.

Important: Skip the section “Enable Jetpack Plugin.” Jetpack is already enabled on WashU Sites. Learn how to create tiled galleries »


Slideshows

Pro tip: Use images that are pre-cropped to the same size for a more professional look.

This slideshow requires JavaScript.

Important: Skip the section “Enable Jetpack Plugin.” Jetpack is already enabled on WashU Sites. Learn how to create a slideshow »


Advanced: Adding a tiled gallery or slideshow to a Tailored page

You can create a standard photo gallery inside of a Tailor content element, no problem. However, adding a tiled gallery or slideshow to a Tailored page requires a few more steps.

First, you create the tiled gallery or slideshow outside of Tailor, then you copy and paste the code into the Tailored page.

  1. Create a new page. Save it as a draft. Do not Tailor it.
  2. Click the Add Media button located above the visual editor toolbar.
  3. Create the tiled gallery or slideshow (using the tutorials above).
  4. Click on the Text tab in the top right corner of the visual editor.
  5. Copy the code, which will look something like this:
    [ gallery type=”slideshow” link=”none” size=”full” ids=”261,238,216″ ]
  6. Save the draft without publishing, then go to the Tailored page where you want to insert the gallery or slideshow.
  7. Paste the code into the Text tab of a Content element on the Tailored page.