Creating a Sweet Automatic Thumbnail Gallery in WordPress

Creating a Sweet Automatic Thumbnail Gallery in WordPress

Study after study has shown that people are drawn to images on a website. And so it’s important to get the most out of your images.

Recently we went over automatically linking your images to an attachment page – i.e. a page that looks like your site, with a header, a footer, and maybe some other elements on it as well.

One little “trick” you can use on your attachment pages is to automatically generate thumbnails for all the images from that post. This will help your images work harder for you, creating more engagement and satisfying your viewer’s desire for great images.

What we’re going for is something like this below – a main image on top, and then other thumbnails from the post below that.

thumbnails-on-attachment-page

Adding Code to Your Functions File

The first thing you’ll need to do to get this to work is to add some code to your functions file. (Appearance > Editor > Theme Functions – functions.php)

Of course, if you’re going to be changing your theme’s template files, it’s always a good idea to make a child theme and work with that.

Here’s the code you’ll need:

Editing Your Theme’s Attachment Page

Next, we’ll need to add a bit of code to your attachment file. The hierarchy for the attachment file is the following:

  1. image.php
  2. attachment.php
  3. single-attachment.php

This means that if you have an image.php file in your theme, that’s what WordPress will take over all the others. If you don’t have an image.php file, but you have an attachment.php file, then it will take that template, etc.

Most themes probably have an image.php file or an attachment.php file that you can edit. (Appearance > Editor > image.php or attachment.php)

You’ll want to put the following bit of code into your template file where you’d like the thumbnails to show up. Depending on what’s already in this file, you may just have to play around with it a little to get it looking right.

<?php
 echo show_all_thumbs();
 ?>

Styling Your Thumbnails

While the code above will pull in your thumbnails, more than likely you will find that they are all run together like this.

run-together-2

In order to solve that, you can give attach a CSS class to the code above, and then do some styling in your stylesheet.

So let’s do that, replacing the code above with this slightly altered version that has a div around it.

<div class="attachment-thumbnails">
 <?php
 echo show_all_thumbs();
 ?>
 </div>

Then you can go to your stylesheet and put in styles you like. (Appearance > Editor > Stylesheet – style.css)

Of course the possibilities are pretty much endless, but here are a few styles that may help you get started.

. attachment-thumbnails {
clear: both; float: left; font-size: 11px; line-height: 1.6em; 
}
. attachment-thumbnails img {
height: 125px; margin:0 20px 15px 0; width: 125px;
}
. attachment-thumbnails .active img {
border:3px solid #0066CC;
}

This will give you some space between the thumbs and a few other properties to play with.

thumbs-with-space

An Important Note about Images in WordPress

If you are putting thumbnails on your attachment page, then there are a few important things to be aware of.

WordPress has improved image handling quite a bit over the last few years, but there are still a few “weaknesses in the system,” let’s call them.

An image in WordPress will get “assigned” as an attachment to the first post that it’s associated with.

So, for example, if you are writing a post (let’s call it Post #1), and you use the media uploader to put an image into the post (a red apple, let’s say), that red apple image will get assigned as an attachment to that post (Post #1).

Therefore, if you begin writing a different post (Post #2), and then go into your media library, find that original red apple image, and then put it into your new post (Post #2), when the viewer clicks on the red apple image and goes to the attachment page with the thumbnails below it, the viewer will see the thumbnails from Post #1, not the thumbnails from Post #2 as you would like.

A Workaround

While that’s not ideal, there is a workaround.

While editing Post #2, you can re-upload the exact same photo again, and the media library will give it a different name (e.g. red-apple-2) and attach it to that post (Post #2).

If you do this, then the viewer will get the thumbnails from Post #2 on the attachment page.

Getting All Thumbnails on a Post

If you would like thumbnails for all the images to show up in a post page itself (not the attachment page), of course you could just make a quick image gallery.

But if you’d like to have thumbnails automatically generated, there are a few plugins for that.

The simplest I found was the Simple Image Grabber plugin. This may take some styling to get a nice look, but its raw nature may suit some.

If you’d like something more involved, with predefined styles and carousel functionality, there is the Carousel of Post Images plugin.

Here’s a look at a screenshot from the Carousel plugin.

carousel

Photo credit: images