University Marketing & Communications

April 10, 2013

Create a WordPress image gallery

By University of Washington

On this page:


Overview

The Marketing Web Team has created a custom image gallery for our UW WordPress Theme. Our gallery can be added to any page, post or homepage and features:

  • A clean way to showcase many images on one page.
  • A slideshow experience without an additional plugin.
  • A title and optional caption overlay that appear when the user hovers their mouse over thumbnail images.
  • Social sharing links and the title/caption overlay when the user hovers over expanded images.

Take this gallery of Katherine’s photos for a test drive:


How to create a new gallery

Important: This tutorial assumes you are comfortable with uploading new images in WordPress. If you are unfamiliar with how to upload images, please start with our step-by-step image tutorial.

  1. Make a new page or post, or edit an exiting one.
  2. Place your cursor where you would like the image gallery to appear, then click Add Media.
    New Gallery: Click Add Media
  3. A pop-up box titled “Insert Media” will appear. Click the Create Gallery link.
    New Gallery: Click Create Gallery
  4. Upload any new images (follow Steps 3-10 in the image tutorial).
    • Note: If the images you want in your gallery are already uploaded to your Media Library, click the Media Library link and go to Step 6.
  5. When you finish uploading your new images, you will be taken to the “Media Library” section of the “Insert Media” pane. Your newly uploaded images will appear as small thumbnails at the bottom.
    New Gallery: New images at the bottom of Media Library pane
    • You can click on each image and edit your metadata in the “Attachment Details” pane to the right-hand side during this time (changes save automatically).
    • Go to Step 7 if you are not adding any already uploaded images to your gallery.
  6. Select all images you want to appear in your gallery from the Media Library section. A check mark in the corner of each image you selected will appear, and small icons of your selected images will appear at the bottom.
    New Gallery: Select images
  7. Click Create New Gallery at the bottom of the “Insert Media” pane.
    New Gallery: Click Create New Gallery

    Click image to enlarge.

  8. You will now be in the “Edit Gallery” pane. Drag and drop your images to reorder them.
    New Gallery: Drag and drop to reorder

    Click image to enlarge

  9. If you need to edit your image titles, captions, and other metadata, click on one image to make your edits in the “Attachment Details” section on the right-hand side. (Your changes will save automatically.)
    New Gallery: Edit image data in Attachment Details

    Click on image to enlarge.

  10. Click the Insert gallery button at the bottom of the “Edit Gallery” page.
  11. You will return to the “Edit Post” or “Edit Page” screen and a gallery shortcode will have been added to your content area.
    New Gallery: Shortcode will be added to your page/post
  12. Preview your page or post to test out your new gallery.
    New Gallery: Preview your page or post
  13. Click Publish or Save Draft to save your changes.

Future improvements

Because the galleries are a new (and complex) addition to our theme, we are still working on making improvements. If you have feedback, please email uweb@uw.edu.

We have already received requests for the below improvements, which we will try to add in the near future:

  • A way to “save” galleries so they can be accessed from the Media Library.
  • A way to make changes or edits to galleries after the page/post containing them has been published.
  • Enabling galleries on one site to be shared or embedded onto another UW WordPress site.