Skip to content

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).

10 thoughts on “Use one image to link to WordPress galleries”

  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).

  2. This is exactly what I was looking for, so thank you very much. But is it also possible to show let's say the first four images of a gallery.

    1. I haven't tested this, but in theory, if you replace both of the original commands with this one, it should work to show the first four images:

      .gallery-item:nth-of-type(1n+5) {
      display:none
      }

      This changes the approach - instead of hiding all and showing one, it shows the first four then hides the rest. The formula does the work, and 'n' is a variable that starts at zero. The lowest value this will evaluate to is 5: 1*0 + 5. So all elements under 5 will be treated as default (visible), the rest will be hidden.

      You'll also have to modify the layout to handle the width/height of the four images.

      Again, I haven't tested this, but it should work.

      -rob.

      1. Hi Rob,

        Thank you very much for your quick reaction. Well I have tested it and it does the job.

        Eric

Comments are closed.