Menu Close

GUIDE: Simple WordPress Photoblog Gallery Grid2 min read

Listen to this article

photoblogHave a nice blog template for your photoblog, but it’s not designed to provide a nice grid of your photos? Here’s how to make one that uses the Featured Image (a.k.a. “thumbnail”) from your latest posts. I wish I could find an easier way, but I have not yet.

  1. Install Featured Image Thumbnail Grid plugin
  2. Create a new PAGE with whatever title you want, but put [thumbnailgrid] as the content (do it in Text mode so it doesn’t get formatted)
  3. Go into Settings > Reading and choose that page under Front Page displays > Static page

That’s it! Unless, of course, you want to tweak it. Then read on.

Limitations of this plugin

First, it does not support pagination, so not sure how to allow user to go to older posts except through archive links in the second column.

Second, I have not figured out how to use the shortcode in my archive templates, but that should be easy. I’ll ping the plugin creator for that.

Some possible tweaks:

1. Note that the shortcode does support various parameters, including post type, category ID, and more.

2. If you want your Archive pages to also have this format, you will need to edit your archive.php and/or category.php and try to make the shortcode work. I haven’t done this.

3. If your existing posts don’t have featured images, you can automatically create them for all existing posts using the Auto Post Thumbnail plugin

4. I you want to display larger thumbnails without regenerating them, just add this bit of CSS to go along with the Image Thumbnail Grid plugin

.postimage img {
width: 180px;
height: 180px;
}

.griditemleft {
float: left;
width: 180px;
padding: 10px;
}

5. If you have already generated thumbnails at the default size (150×150) and want to recreate them at a bigger size:

a. Install Thumbnails for Excerpts plugin, then under Settings > Thumbs Excerpts, change thumbnail size (mine are 180×180)

b. Use the Regenerate Thumbnails plugin to redo them all at the new size

6. If you want to pretty up your thumbnails and other images, try this css

img {
border-width: 1px;
border-style: solid;
border-color: #ccc;
position: relative;
z-index: 50;
border-radius: 28px;
box-shadow: 0 1px 1px rgba(153,153,153,0.4);
padding: 0;
margin: 0;
}

If you’ve read this far, you might also enjoy this post I wrote:

Tagged