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:
1 2 3 4 5 6 7 8 | /*Gallery only show first image*/ .gallery-item { display: none; } .gallery-item:first-child { display:block; } |
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:
1 | <div style="float:right; height:200px" class="restrict">[gallery link="file" columns="1" ids="nn,nn,nn"]</div> |
I made one addition to malissas' code, which was to add a restrict qualifying class:
1 2 3 4 5 6 7 | .restrict .gallery-item { display: none; } .restrict .gallery-item:first-child { display:block; } |
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).
Thank you. This is exactly what I was looking for.
Thanks bro!
Thank you. You are my hero.
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).
Just what I needed. Thanks.
Perfect! Thank you !
thank you very much, simple and very useful
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.
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.
Hi Rob,
Thank you very much for your quick reaction. Well I have tested it and it does the job.
Eric
Comments are closed.