Gallery as an Index Page

This post was updated on 28 February 2014

What follows is a workaround to link Gallery images to Pages and or Posts or external URLs. While this workaround does work, read on to understand its limitations.
If you would like to see a change in how the Gallery feature functions so that this workaround becomes unnecessary, won’t you please take a moment and post into the thread I started in the Community Ideas Forum? TIA!
If you post into my forum thread, please also say how you would use this feature if available. Thanks again!

It has been possible to add clickable links in the Description area of images for quite some time, but starting from around May or June this year this function was extended to image Captions as well. This subtle addition allows the Gallery feature to be used as an Index page or portal for other information, with some limitations (see “Some points to consider” below).

There are two ways you can add Image Captions and/or Descriptions once you’ve uploaded your images:

  1. Via the post/page itself, by clicking on the Gallery placeholder in the Visual Tab of the Post/Page Editor and then on the Edit Gallery icon that appears in the upper left corner of the Gallery, which will then open the Media Handler’s Gallery screen, or
  2. Directly in the Media Library, after clicking the Edit link that appears under each image in the Media Library

Adding links in image descriptions or captions is not as simple as creating links via the “insert link” function in the Visual tab of the Post/Page Editor of posts or pages because the links must be added as HTML code. Thankfully, for those of us who are HTML challenged, it is possible to create the links in a draft post or page’s Visual tab and once the link is created, by switching to the Text tab to copy and paste the resulting HTML code into the image caption or description area. Tip: Keep two tabs or browser windows open to make this easier. If you are comfortable writing HTML, you can, of course, add these links directly after upload. In all cases, make sure to click “Update Gallery” when done to close the Media Handler.

As a Gallery can only display images, I’ve used various sizes of icons in my above example Gallery so you can see this theme’s spacing and alignment in the Gallery’s default Thumbnail Grid (which, using columns, gives more control over placement of the icons), but you can also use thumbnails of documents or any other image to represent the link.

It is also possible to create a similar portal using an HTML table, as explained in “When is a gallery not a Gallery“.

Some points to consider:

  • This technique works best with the Gallery’s default Thumbnail Grid rather than with Gallery types and assumes that you are creating your Gallery either in a Page or in a Post using the Standard post format. This technique may have unexpected results on any Post using the Gallery post format. (More about Post Formats.)
  • When a visitor clicks on the Gallery’s thumbnail image rather than the caption, the Photo Carousel or image Attachment page or the image itself will open. If you’ve turned off the Photo Carousel under Settings>Media>Image Carousel, you should set the Gallery to link to the  Attachment page so that visitors can still click on the link in the caption or description that appears there.
  • The tendency of visitors to click the icon is the obvious disadvantage of using the Gallery in this way. Most people will click on the icon rather than the caption, so give them every opportunity to reach the link.
  • The Gallery feature is designed to ignore any link inserted in an image’s Custom URL field.
  • Links added to captions or descriptions can be external links, other Pages, Posts, PDF documents, or any other file type supported by (See also, Uploading Documents.) On the last icon above, I’ve labeled each field as it appears in the image settings window.
  • Captions should be short. Lengthy captions may distort image alignment.
  • Gallery Thumbnail and Caption alignment may differ from what you see here depending on the theme you are using.

Copyright © 2012-All rights reserved,  Gallery – A Demo Blog

Prerequisite reading:

Suggested Further Reading:

If you want to learn more about using HTML, here are a few guides to get you started: