Lara Schenck

I recently added 270x270px gallery and post thumbnails to WPFolio Two. They look damn nice in columns of three in the portfolio categories. While working on this, I found that WP’s thumbnail/image attachment functions are not so well documented, so I wanted to be sure to share what I figured out. Here I’ll go over the code to change the thumbnail size with add_image_size, then grab a post’s first attachment and turn that into the thumbnail, and finally filter the gallery shortcode to change gallery thumbnail sizes.

NOTE : this is a relatively verbose tutorial, so you can just download the code here if you like.

First download the Regenerate Thumbnails plugin. Run it whenever you want to see your changes, mainly when you are wondering why the thumbnails are not being cropped.

Everything goes in functions.php. First, you’ll need to add theme support for thumbnails, set the thumbnail size, and add a custom image size for the generated thumbnails. That happens like this:

WP generates a special URL for resized post thumbnail images, for example, the URL of a 150 x 150 thumbnail of myimage.jpg would be ../wp-content/uploads/2011/09/myimage-150x150.jpg. This can be changes in Settings/Media. The function add_image_size('wpf-thumb', 270, 270, true), essentially does the same thing, but is adding a new image size called ‘wpf-thumb’ rather than changing the ‘Thumbnail’ size. The ‘true’ sets cropping mode to true. If false, your images will retain their original proportions i.e. will not be even squares. Later, we will apply ‘wpf-thumb’ to an image url for the post thumbnails created from attachments.

Next, we’ll add the function that pulls a post’s first attachment so that there will still be a thumbnail if a ‘Featured Image’ hasn’t been chosen in the post editor. Here’s how that happens:

In wpf_get_attachments(), get_post() queries all posts, grabs only the ones with image attachments, and returns all of the attachments. Post_mime_type specifies that the images are attachments rather than video, audio, or otherwise. On to the next hunk:

Here we call the wpf_get_attachments() function and toss the array of the returned attachments into the variable $imgs. The next couple of lines basically say “if there are images, reverse the array (WP generates the array from last to first) and get the first element”. Then, we call wp_get_attachment_image() to echo out the image URL.

Next we make our generated thumbnails permalinks:

And almost finally, add this conditional to the template of your choice:

Next, because for some reason all of this doesn’t apply to gallery thumbnails, you’ll need to filter the gallery shortcode function located in wp-includes/media.php. This is a huge function, so take a look at it here. You can change the size of the thumbnails and the images per row in the shortcode attributes toward the beginning of the function. And finally add some style:

I lost energy towards the middle of this tutorial, so apologies if it’s confusing and rushed. Please ask any questions/note any mistakes in the comments!

10/30/13: Update, I mean, something cool
I am rewriting WPFolio (again?!) and unsuprisingly, had some trouble with thumbnails. Not this issue particularly, but as I was Googling I came across this post! Just bragging for a sec.