How To Make a Visual Archives Page

This post has been quite the work out.  I wanted to do something simple – has my archives in a visual index format.  That’s not asking too much, right?!?

I went about making visual indexes three different ways.  It’s all about trial and error.  I finally found a method I like, and it isn't too hard to put together.  However, you need some patience and have to dedicate a decent amount of time to make each little picture and set up your HTML code - as with any design process.

So let’s discuss the methods, and I’ll explain why I battled it out with HTML for the win.

Method #1 – inlinkz Link Manager

Pros: Easy to update images with captions using the inlinkz website.  One HTML code install and every updates when you update the categories on inlinkz.

Cons: inlinkz Link Manager is no longer free.  I really hate the large space after the collection with the inlinkz logo taking up extra room – hard to have category titles and giant spaces.  I arrange my posts without titles, but felt like everything just ran together.

Method #2: Image-Maps

Pros: Attach multiple URLs to one image.  Generates HTML code for you.  Easy to use.

Cons: HTML code error with too many “rectangles” on one page.  Collages will show the same alt title and link to wrong posts.  This method is good for one or two multi URL images, not a whole index.

See how to use image-maps on Something Swanky.

Method #3: Individual pictures with HTML code

Pros: Lots of control over format.  Easy to add category titles without creating uneven spacing.  HTML code is easy to insert and can be adjusted as needed.

Cons: Not the quickest process – each individual picture must be created, sized, formatted, captioned and uploaded to prep for the HTML code.  BUT…it’s so worth it.

Now I've tried all the methods; seriously tried them.  I had inlinkz before this process started.  Then, I finished all 5 of my topic index with image-maps only to find out about the overlap problem.  Two days lost.  Ugh! 

I feel really strongly about taking the time to make the HTML index.  The plus side to HTML is that it will translate between many platforms (as far as I’m aware of).  Sorry I’m not WP savvy yet, but HTML is HTML…right?

So here’s how this works.  I used PicMonkey and Paint to edit my photos.  You can use whatever software you like.

Create a collage using PicMonkey.

Choose Ducks in a Row with 2 cells.  "X" out one of the cells.

Click the lock at the bottom of the picture to unlock the picture sizing option.

Change the picture size to 325 x 300.

You don't want a square yet, the extra 25px will be added later and leave room for a post title.

Click the lock again to save the new picture size you've created.

Upload the pictures for you index.

Choose a picture to add and drag it on over.

Position the picture as you like it to appear in the index.

Save your picture.

Open the picture you just saved with Paint.

Drag the bottom of the picture to resize it to 325 x 325.

This will leave a white bar at the bottom.

This is you title space.

Upload your resized picture to PicMonkey's Edit Photo option.

Choose a font you like.

Add font to the picture, center it, and size the font to your liking.

Save your picture.

Upload your picture to a photo hosting site.

I used Photobucket.

This is where things take a design turn.  Ready?

You need these two HTML code format to install the pictures you created.

Image {for your Category Title}

<img src=" URL WHERE YOUR IMAGE IS SAVED HERE" />

Image with Link {Post Visual Representation with link to post}

<a href="YOUR POST URL HERE" target="_blank"><img border="0" alt="IMAGE TITLE HERE" src="URL WHERE YOUR IMAGE IS SAVED HERE" /></a>

The URL where your image is save is the "Direct Link" in Photobucket. 

Your page will look a little something like this with the code installed:

{The HTML tab in Blogger is in the top left, next to Compose.}

The highlighted area is where you will place your category {sub-section under the main index heading} Direct Link.

Once you add all the links and titles to your HTML code, you will need to adjust the picture sizes so they fit the width of your blog.

My blog is 1300px wide, and the side bars are 250px - leaving 800px.  I started with a 700px space reference and I wanted 4 pictures per row.  700px/4 pictures = 175px per picture.

Here's what the HTML code with the width adjustment looks like.

With Width Adjustment:

<a href="http://www.whitelightsonwednesday.com/2012/05/mildly-crafty-monday-menu-planner-redux.html" target="_blank"><img border="0" alt="Menu Planner Redux" src="http://i1189.photobucket.com/albums/z421/WhiteLightsonWednesday/Project%20Index/MenuPlannerRedux_zpse4b597d3.jpg" width="175"/></a>

The adjustment will effect the width and height proportionally, so you only need to change one.  It's a square people.  :)

Check your width choice in "Preview."  If the width don't give you the right number of pictures across, simply decrease the width.  I actually needed my pictures to be 150px to fit correctly.  So the HTML code would have width=”150” instead.

Add the HTML code <center> at the very top of your HTML code.  Add </center> at the very bottom of your HTML code.  This keeps everything centered and looking pretty.

The nice thing here is that your code stays organized.  You can easily add a new post with the Image with Link code, and the pictures will start a new row if needed on their own due to the spacing you set.

For clarity's sake, these indexes are "posts" in my blog that are back dated to September 1, 2011 - before my first post.  I link to them the way I would link to any post.

I love my new index page.  I've finished the Projects Index.  The other pages are a work in progress and I hope to have them all finished in the next week.

Please let me know if you have questions I can help with!  If I don't know the answer, I have lots of friends who do blog design and probably know the answer.