The Robservatory

Robservations on everything…

 

Use one image to link to WordPress galleries

Note: If you’re not running a WordPress blog and using its built-in gallery feature, the following will be of no interest to you; it’s posted here mainly to make it easier for me to find in the future, when I forget it once again.

WordPress includes a simple-but-usable gallery feature. Unfortunately, posts with embedded galleries display a thumbnail for every image in each gallery—and there are no options to limit the display of thumbnails. While fine for shorter galleries, such as this one, if you’ve got a lot of images, this can make for an ugly page.

What I wanted was the ability to include an image gallery in a post, but not show a thumbnail for every picture in the gallery. Ideally, I’d just be able to use the first image from the gallery, or perhaps even a text link. After a lot of fruitless searching, I finally found the very simple answer in a post by malissas in this thread.

malissas posted this very useful bit of CSS:

Add this to your CSS file, and all galleries will display only the first thumbnail; clicking that thumbnail will open the gallery. You can see how this works in my Apple Q2 2014 financials graphic post; only the first thumbnail appears.

To get full control over the thumbnail’s position, I found it necessary to limit the gallery to one column; I then position it in a div and float it as needed:

I made one addition to malissas’ code, which was to add a restrict qualifying class:

In this way, I can have a single-image gallery (by adding the class="restrict" to the div), or a multi-image gallery (by leaving the restrict class out).

5 Comments

Add a Comment
  1. Eureka! Spent half a day frigging around with PHP and achieved nothing. You solved my problem with a few lines of css. Thanks heaps Rob (oh, and malissas).

Leave a Reply

The Robservatory © 2017 Built from the Frontier theme