Search Google Appliance

Information Technology

Create Image Galleries & Slide Shows on your Blog

The WordPress Image Gallery feature creates a grid of thumbnails on a page or post. Clicking the thumbnails will open a larger version of each image.

By default, images open as "attachments" on a new page, and to advance through the images your visitors can click next or previous links at the top of the page. However, if you set the images to link to Media File instead of Attachment (see below), the FooBox plugin (activated for all Blogs atUMass Amherst sites), will launch a "lightbox" slideshow of all the images in the gallery. You can insert more than one gallery on a page or post and each gallery will have a separate slide show.

For more advanced gallery options, including masonry and carousel layouts, additional caption options, and more ways to sort and sequence media, activate the Foo Gallery or Foo Owl Carousel plugins then click the Add Foo Gallery button that appears next to the Insert Media button when editing Pages or Posts.

Create an Image Gallery on a Page or Post

  1. Open or add a Page or Post.
  2. Click Add Media (above the Editor tool bar). The Insert Media window opens.
  3. In the Insert Media window, at top left, click Create Gallery. The Create Gallery panel opens on the right.
  4.  Select media already in your Media Library, or click the Upload tab (top left) to upload media files. Checked items in the Media Library are selected to be added to the gallery. (To remove a selected item, click the checkmark at the top-right its thumbnail).
    Note: As you add items, tiny thumbnails will appear under the Media Library window.
  5. Click each checked thumbnail to enter metadata (at right) such as a Title, Caption, or Description as needed.
    Note: Always add Alt Text to make your content universally accessible.
  6. Once all the thumbnails for your gallery are checked and the metadata entered, click Create New Gallery (at bottom-right). The Edit Gallery panel will open.
  7. To change the order in which your media appear, in the Edit Gallery panel, drag and drop the thumbnails.
  8. Under GALLERY SETTINGS (at right):
    • For Link to, select Media File to have your media open in a lightbox slidehow.
      Note: Otherwise, by default, media open as "attachments" on a new blog page showing metadata, and with Previous and Next links to the other items in the gallery. Attachment pages allow comments.
    • Set the number of columns for the thumbnail grid that will display on your page. The thumbnails will resize to fit in the number of columns selected. (More columns make thumbnails smaller, and fewer columns make thumbnails larger.)
    • (Optional) select the Random order checkbox.
    • Size controls the size of the enlarged image visitors will see if they click on a thumbnail.  You can choose Thumbnail, Medium, Large, or Full size. On your page, media inserts will be responsive and will resize to fit in available space in the page layout, whether viewed on a small mobile device or a large desktop screen.
  9. Click Insert Gallery. You'll be returned to the Edit Post or Edit Page screen.
  10. To save your work you need to also save the page or post: click Update, Publish or Save draft.
  11. View or Preview your page or post and try out your gallery to ensure it's working as expected.

Edit an Image Gallery

Once you have inserted a gallery you can edit its settings, and add or remove images.

  1. In the Edit window for your page or post, click on any thumbnail in the Gallery. The galley will be highlighted and an Edit link (pencil icon) will appear at top.
  2. Click the Edit link (pencil icon). The Edit Gallery panel will open. 
    • To add an image to the gallery, click Add to Gallery (at left) and select (or upload and select) media.
    • To remove an image from the gallery, click the X at the top-right its thumbnail.
    • Edit GALLERY SETTINGS (at right) as needed.
  3. Click Update Gallery (at bottom). You'll be returned to the Edit Post or Edit Page screen.
  4. To save changes you need to also save the page or post: click Update, Publish or Save draft.