Finding Morgan

How to Add A Post & Image Gallery to Your Blog

bloggingMorgan Taber17 Comments

  I recently had one of my sidebar widgets die on me, it just so happened to be the widget that held all of my most popular posts. Which as every blogger knows is a very, very important part of almost any blog. I tried to revive it, but couldn't get it back up and running again. That got me thinking about how it would probably be super simple to create my own gallery using PicMonkey. Plus, even if I did get the widget working again, what if it stopped working again? It's nice to have control over your own blogging destiny. So, I set off to create my own.

Another great thing about making your own gallery, is that it's fully customizable- I can control what pictures and posts are used.

First things first, head over to my favorite online tool, ever, PicMonkey. Once there, choose Collage. PicMonkey will now request where the pictures you'd like to use in your collage are located. You can choose some or all of the photos you will be using now. You can pick an choose once you're in the editor as well as add more photos.

In the editor, you are going to choose the layouts option (highlighted in blue). Choose the Square Deal layout. We will change the shape later on, I prefer a rectangle. The fourth option is my favorite for a photo gallery. After you click  it, you are going to notice that there are 16 squares. 16 squares are a little much for my sidebar, the pictures are really hard to see. So, let's go ahead and remove four blocks. Mouseover the upper right hand box first. An X will appear, go ahead and click it. Repeat the process with the 3 squares below it.

This leaves you with 12 lovely blocks. Down at the bottom you will see the dimensions of your layout. 2000 x 2000 is WAY too big. My sidebar is a little over 300, so I like to keep my widgets at around 300 even. The length is up to you. I went with 500.

Click the little padlock to unlock your dimensions. Enter  your dimensions and press ENTER or RETURN.

Screen Shot 2014-11-13 at 6.21.23 PM
Screen Shot 2014-11-13 at 6.21.23 PM

Now for the fun part! Click on images (the little mountain sun thingy). Start dragging your purty pictures into the cells. You can move them around once they are inside a cell. I like to play around a little bit here.

After you've got all of  your pictures situated, go ahead and click save at the top of the screen. PicMonkey thinks my creation is genius! I love you too, PicMonkey!

I saved mine as the Pierce quality, being it's going to be small it doesn't have to be super-duper quality. I also like to double-check my dimensions and make sure that they are correct. You're going to want to save it to your computer and a picture hosting site like PhotoBucket or Flickr. After you've uploaded to your hosting site, copy the direct link to the image.

We need a way to make each of these images inside the one picture clickable. I don't always care for image maps, but this is one instance where I think using an image map works great. Let's head on over to Image-Maps.com with your copied direct link. Enter the link address into the field below "Start Building Your Image Map". Click Start Mapping.

On the next screen you should see your photo gallery.

Now, to make each image clickable. I like to open up a sticky note or notepad on my computer and copy the direct link for each article that I want each picture to direct to. This makes it easy to copy and paste the link right into the image map.

Screen Shot 2014-11-13 at 6.39.09 PM
Screen Shot 2014-11-13 at 6.39.09 PM

After you clicked to continue on your gallery image, you are going to be brought to another page with your gallery image. This is the page where the magic happens. Right click on your image (or CTRL+Click for Mac users) and choose Create Rect.

After selecting Create Rect you'll see a little dashed line selector tool and a pop up menu. Make a rectangle around the first image. In the pop up menu, add the link to the post you want that first photo to point to the Map URL field. Click Save. Repeat this process with all of your other images.

1. Right click (or CTRL+click for Mac users)

2. Select your photo using the dashed line selector tool

3. Add link to the post that you want the image to direct to in the Map URL field

4. Save

As you successfully map each image, it will turn red. When  you are all done, it should look something like this:

Now right-click (or CTRL+click for Mac users) on your image map and select Get Code. It will bring up a pop-up menu. Scroll down to the bottom to where it says HTML Image Map Code, copy this code.

Add an HTML Widget or Gadget to your sidebar and paste the above code in. That's it! Now sit back and enjoy your masterpiece, I know your readers will!

*I am not being reimbursed or compensated for this post. All opinions are 100% my own.