How to make a thumbnail photo gallery in Blogger

The Edit menu includes a number of options, including Exposure (brightness and contrast), rotation, sharpening, resizing and so forth. Primarily you will need to worry about Crop. (Do not worry about resizing your photo at this point. We will resize later using code.) Click the Crop button. You are now in Google Photos, which has replaced Picasa Web Albums. All of the images that have appeared on your blog are stored here. Click Albums. To access your Picasa Web Albums, go to www.google.com and log in with your Blogger account. Click More. In the drop-down list, choose Photos. View the list »
Make a thumbnail photo gallery in Blogger to show off your projects

Tech Gear newsletter

Blog writers who cover DIY, crafts, photography or other visual topics on the Blogger platform would love an easy way to create a gallery of thumbnail images to showcase their creativity.

Related topics

Advertisement

WordPress, Blogger's main rival, offers plugins to create a DIY gallery. However, if you don't want the bother of completely switching platforms just to get a gallery, follow these instructions for creating your own thumbnail gallery.

To see an example of a thumbnail gallery in Blogger, see the DIY Gallery at the craft blog Caught on a Whim.

This how-to is based off instructions from a helpful tutorial at Laura's Crafty Life. It has been enhanced with instructions on how to create thumbnails in Picasa (Now Google Photo). I will also show you how to crop your photos using code. If you ever change the layout of your blog, you won't have to go back and re-crop all of your images.

This tutorial will show you how to:

  1. Crop your photos. A photo gallery looks better when the images are either all horizontal, all vertical or all square. For the purposes of this tutorial, I will show you how to crop your photos so they are all square. See the attached list for screenshots and step-by-step instructions for cropping your blog images.
  2. Insert the code, image links and post links into your blog.
  3. Resize your photos using code.

Step 1 is covered in this article in the attached list.

Step 2 is covered in my article How to make a thumbnail gallery in Blogger - inserting your code and links.

Step 3 is covered in my article How to make a thumbnail gallery in Blogger - resizing your thumbnails.

View the list
  • To access your Picasa Web Albums, go to www.google.com and log in with your Blogger account. Click More. In the drop-down list, choose Photos. 
  • You are now in Google Photos, which has replaced Picasa Web Albums. All of the images that have appeared on your blog are stored here. Click Albums. 
  • The Edit menu includes a number of options, including Exposure (brightness and contrast), rotation, sharpening, resizing and so forth. Primarily you will need to worry about Crop. (Do not worry about resizing your photo at this point. We will resize later using code.) Click the Crop button. 
  • For consistent thumbnails, you will want to crop your images to be square. Under Crop, click the No constraints drop-down menu and choose Square.
  • A square box will appear over your photo that indicates the crop window. You can drag the corners of the box to include a larger or smaller area of your image or move the entire box to focus on a different part of the image. 
  • Click Apply under the Crop menu to apply your crop. Then click the blue Save button in the top right corner of the screen to save your cropped image. 
  • After clicking Save, you will be prompted to Confirm Photo Replace. Choose Save a new copy. This will preserve your original image without changes
View the list
Suggested by the author:

, NY Technology Examiner

Samantha Baldwin has more than a dozen years of experience fixing hundreds of computer problems from hardware to software, desktops to laptops, Microsoft Windows to Microsoft Office, Apple iOS to Android. She's felt the pain so you don't have to and shares her tips and tricks.

Advertisement

Today's top buzz...