WordPress, Galleries, Mobile, Responsiveness, AMP?!

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"]

Examples

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.

AMP

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.

Now AMP uses a really reduced set of Javascript and many other third-party thumbnail grid plugins simply do not work with AMP – not even a thumbnail grid will render. Here’s what an AMP page with a thumbnail grid (or lack thereof) looks like, when I use my favorite thumbnail grid plugin, Justified Image Grid:

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.

Fin

And that’s it. If you think I missed something or have any other comments, please just drop me a note, below.

Advertisements

3 Comments

  1. I wonder what page Google would use to index the amp enabled post. If it is the AMP content without the image captions might this be worse for SEO than the regular version of the page? Hopefully it indexes the full post with captions and then shows the AMP version when someone is coming in off of mobile search results.

    Like

      1. Lol maybe. More so for the things I can control. I try not to get into all the messy areas like keywords, keyword density etc etc. I mostly just try not to shoot myself in the foot more than I need to!

        Liked by 1 person

Thoughts? Let me hear them.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s