Tuesday, June 26, 2012

How To Create A Visual Archives Page

I have received several emails from people asking about how to create thumbnail archives like I have on my recipe and craft pages.


Here is the tutorial for how I do it from start to finish.


1. Using the photo editing software of your choice, open the photo that you would like to use in the thumbnail. Since Picnik moved over to Google+ I started using Pixlr which is kind of a combination of Picnik and Photoshop. This is what I will be using for the first part of this tutorial. 

***Check back tomorrow for the recipe for these Chocolate Guinness Maple Bacon Cupcakes! :) ***


2. Crop the photo down to a perfect square. From the cropping menu, choose "aspect ratio" and it will automatically keep your cropping selection in a square shape.


3. Go to the image menu and select "image size" from the drop-down menu.


4. Reduce the image size to 160 pixels and save.


5. For this next part, I like to use the paint program on my computer. Create a new canvas and size to 185 pixels wide and 220 pixels tall.


6. Hover over the paste button and select "paste from" on the drop-down menu.


7. Choose the square photo that you had saved in step four. Move the photo so that there is an even border on the top and sides with a large blank area underneath. Add text underneath the photo with the name of your project or recipe. Save this photo.


8. Create a new page for your archives and add your photo. Click on the photo and then the "link" button. Where it says "To what URL should this  link go?" add the url for the post that you want the archive photo to lead to.


9. To get the frame around your photo, you can either add it using your photo editing software or you can get blogger to add them for you. Go to "Template" then "Customize".


10. Select "Advanced" then "Images" and change the "Border Color" to something that compliments the colors on your page.



All done! Now people visiting your page can easily get a sneak peek of your projects. :)

This post may contain affiliate links. These affiliate links help support this site. For more information, please see my disclosure policy. Thank you for supporting Polish The Stars.

19 comments:

Steph @ Crafting in the Rain said...

Your page (and the cupcakes) looks great!

Julie E said...

This is so cool! I've been wanting to have a visual recipe index forever. I'm totally making this setup my new project. Thanks so much Megan for the tutorial. I can't wait! And those cupcakes...holy cannoli!!

Nicole {WonkyWonderful} said...

Thanks for the tips. I am a newbie blogger and have set up pages to organize my page posts as I go along. Your archives look very clean and uncluttered. I'll being using your tips to get started. Love your blog :)

Julie said...

Found you via Someday Crafts link party and now I'm gonna follow along. Thanks for the awesome tutorial, I'm just getting ready to set up some archive stuff on my new-ish blog! :)

Kristy @ Swamp Hollow Designs said...

Thanks so much! Just a question - how do you get your images to line up neatly?? I've tried to arrange them nicely and sometimes they end up all over the place... I don't know if I'm doing something wrong, or if there's a trick I don't know about!!
Thanks :)

shannon @ jozikaroo said...

Whew! Thanks! I've been wanting to do this forever! Very clearly explained. I *so* wanted to have just one photo instead of the whole post. Now it'll just take a little time to whip it into shape, thanks to your instructions.

Megan @ PolishTheStars.com said...

You are very welcome! I'm glad it was helpful. :)

Megan @ PolishTheStars.com said...

I just choose center alignment for all of my photos. You can go to the html view of your page to check and make sure there aren't any extra unnecessary alignment codes or page breaks. Sorry I don't have a quick and easy fix for you. :(

Megan @ PolishTheStars.com said...

Thank you! Welcome to the blogging world. :)

Megan @ PolishTheStars.com said...

You're welcome! I hope it works out well for you. :)

Megan @ PolishTheStars.com said...

You're welcome! I tried to be as detailed as possible. Let me know if you have any troubles with it though. :)

Megan @ PolishTheStars.com said...

Thank you! :)

Carol, The Answer Is Chocolate said...

Very cool! Just pinned this to sit down with when I have the time.

Six Sisters said...

This is a great tutorial! Thanks for linking up to "Strut Your Stuff Saturday!" Hopefully we'll see you tomorrow at 8pm MDT for this week's party! :) -The Sisters

Steph @ somewhatsimple said...

I love blogging how-to's! Thanks for sharing! :)

Ashley @ Hillbilly Princess Diaries said...

I can't get my pictures to link up to the page. I tried clicking the picture and hitting the button that says link but it's not doing anything?? Once it does pull up and I type the URL in, it's not working, the pic is just a pic and doesn't go to anything. I am so not that smart, I hate to bother you but I don't know what I am doing wrong.

Megan @ PolishTheStars.com said...

Sorry it has taken me so long to get back to you. I'm a bit behind on my email. :( I'm not sure what blogger's issue is but sometimes I have to click the picture, the link button, then the picture and the link button again. Usually the box that lets you paste your link will pop up the second time if it doesn't the first time.

Also, its a bit more complicated but if the link button still isn't working for you, you can go into the html tab on your drafted page, find the code for your photo and replace the link in the first bracket with the link to your page. It should look something like this only with arrow brackets instead of the straight lines:

[a href="*****REPLACE THIS LINK:http://2.bp.blogspot.com/-rqwrXi5gSEQ/UH150KFRjHI/AAAAAAAANK0/NA1hgCEgEX4/s1600/cake+ball+mice+2.jpg*****" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"][img border="0" height="456" src="http://2.bp.blogspot.com/-rqwrXi5gSEQ/UH150KFRjHI/AAAAAAAANK0/NA1hgCEgEX4/s640/cake+ball+mice+2.jpg" width="640" /][/a]

I hope that helps! If you are still having trouble with it, just let me know and I will see what I can do. :)

Emma Deirdre said...

Really helpful tutorial! Thanks a million. Love your page!

Mrs. Smith said...

Perfect! Thanks so much, it worked like a charm.