When you look at your own cellphone usage you probably realize: making websites as mobile-friendly as possible is quite important by now. And indeed, many WordPress themes are “responsive” – meaning that they adapt to different screen sizes and orientations nicely.
WordPress Galleries are not responsive
The one thing that is not truly responsive and doesn’t adapt are the WordPress photo galleries though: their layout doesn’t change on smaller screens. The thumbnail grid has exactly the same layout on a large desktop monitor – where it looks terrific – and on a tiny phone screen – where it is next to useless.
While there are plugins that provide a responsive thumbnail grid (my favorite is Justified Image Grid), those plugins are not available for WordPress.com hosted sites, and they still render a grid where two images may be placed side by side, and that’s too small on a phone screen for my taste.
At the same time, I found that I prefer photo blog posts that simply show the images one after the other and as large as possible more appealing. If I can open the images larger in a slideshow viewer/lightbox all the better, but quite often, that’s not even necessary (since I’m talking about WordPress: it’s depending on the content width of the WordPress theme – on a theme with three columns where the main content column is just 500 pixels wide, a lightbox/slideshow view to see the photos larger is a must for me).
A Simple Solution
While experimenting with different thumbnail grid plugins and their settings, I’ve discovered that falling back to the (really old) standard WordPress gallery mode “thumbnail grid” is actually really useful and solves most of these… riddles. So instead of using the fancier Tiled Galleries or Tiled Columns that are part of the WordPress.com galleries and Jetpack (for self-hosted WordPress.org sites), use the old, old thumbnail grid! If your galleries aren’t too big, that is – personally, I’d place the limit at 8 or 10 photos. Which is right where many of my photo blog posts are, coincidentally. 🙂
Here’s what the settings look like in the gallery editor – the screenshot below is actually such a gallery too (with just one photo in it), and you can open it larger if you’re on a desktop computer, by clicking on it. Like a lightbox!
The result gallery shortcode looks like this:
[gallery type="thumbnails" size="large" columns="1" ids="8778"]
Here’s the blog post with the gallery from the above screenshot: The Hummingbird Nest in our Lemon Tree (on my photography site, opens in a new tab) – just to give you an idea what it looks like. You can see that the gallery’s “thumbnails” are actually large photos. So on a mobile device with a small screen, you can just scroll down. They won’t get any bigger anyway. On a larger monitor, you can still click on them to open the slideshow viewer (aka Carousel).
Here’s another blog post: Blue Sky, Green Things (opens in a new tab) – this one contains vertical images as well. Reduce the width of your browser window a lot (until the vertical images start to shrink) to see how the gallery responds to the size change. The vertical images stay big until they cover the entire width, the horizontal images shrink a little sooner. Now this part of the built-in WordPress gallery has been responsive for a very long time – images adapt to the screen/device size nicely.
Using WordPress’ own gallery with the old thumbnail grid layout has another advantage: AMP aka Accelerated Mobile Pages. These pages are essentially stripped down versions of your full site, and users normally don’t see them – unless they end up on your site through a Google Search result.
Coastal Fog at Torrey Pines (AMP version, opens in a new tab)
Bummer! The only photo that is shown in the AMP page is the Featured Image. The gallery thumbnail grid just doesn’t get rendered – at all!
One problem here is that the AMP page doesn’t contain a direct link to the normal (non-AMP) version of the post. Considering that AMP pages are only shown to mobile users, finding the address bar and then tapping on it to edit the URL (to remove the …/AMP/ part) isn’t exactly trivial. I guess a lot of people aren’t even aware of it.
Now compare this to the AMP version of the blog post with the hummingbirds, that I already linked above:
The Hummingbird Nest in our Lemon Tree (AMP version, opens in a new tab)
And the three photos are right there – in a spartan, but usable photo viewer that shows them one by one and as big as possible on a small screen. The captions are missing, but compared to what Justified Image Grid can do on an AMP page, it’s a lot better.
And that’s it. If you think I missed something or have any other comments, please just drop me a note, below.