Set up a Picture Index Page

If you are wanting to set up an index page with picture links of your pages, this is how to do it.  This will only work for blogs with a fixed width, not if you have it set up to adjust depending on the screen size of the person viewing the page.  That requires more complicated html than I am not able to do.

I am working in Blogger here, and using Picasa Web Albums with Picnik for photo editing, but you should be able to transfer all of this to whichever software and blogging platform you are using.

The first thing I would suggest you do is make one folder where you make a COPY of each of the images you want to use.  That way, if you accidentally click replace rather than save a new copy when saving, you won't have altered your original image.

The next thing you need to do is decided how large your images need to be.  I have the full width of my blog set to 1260 pixels, with the right hand side bar set to 460 pixels.  Out of the 800 pixels that leaves, I knew it would need some for spacing and margins, so I went with 200 pixels for each image.  You can see, they don't quite fill the white space in the image above, but I think it is close enough that I am happy with it.  You don't have to have 3 columns, you can have as many as you wish, you will see in the html below.

Once that decision is made you need to edit your images.
First, crop each image to a square.  Try and choose a section that shows what the project is but also has a good space for overlaying the text.
In Picnik, you crop here in basic edits:

To crop to a square, click on that arrow next to "no constraints" or whatever is showing in that box, and find the "square".  Click that and you can continue.

Next you need to add your text.  In picnik that is done through a tab in the top bar.  Choose a font via the scroll bar and type the text into the box at the top.

If you are planning on continuing to add links to your index page after picnik closes in April, I would suggest you don't use one of the premium fonts, unless you don't mind using different fonts on your images after April, or paying for that font then.

Once you have your text overlaid, you need to resize the image.  This is the reason I work in Picnik and not picasa, because for some reason the powers that be at google decided not to put a resize function into picasa.  I have no idea why!

Since you already have your image cropped to a square, if keep Proportions is ticked, you can enter your size into one of the boxes and the other will change automatically.

Make sure to save each image before going on to the next.

And there you have it, a whole folder of images, cropped and resized with text overlaid.

Now we go to Blogger, or whichever blogging platform you use.

My recipes page that you see at the top of these instructions has no sections, just all the recipes together, but for the craft and arts page I wanted to make sections, you can do this easily in the compose tab.

the html for that will look something like this:

Next you need the html for a basic table

which you will insert beneath each section head.

IF at any point you now switch to the compose tab you will lose all the spaces that appear in the above html, and it will all run together.  I suggest that if you wish to see how it is looking at any point before you are finished, that you right click on the preview button and open it in a new tab.

You can adjust the number of columns and rows simply by adding them in, including the td and /td tags for each item and the tr and /tr tags for each row.

Now you need the URL for each page you want to link to and for each image you are using.  In picasa web albums you can get the URL for the image by right clicking.

Now you will replace each row and column number with the following html inserted between the td and /td tags.

Put the URL for the page you want to link to in the blue section above.

Put the URL for the image in the blue section below.

Repeat for each page you want to link to, with it's image, putting each one between those td tags

And finally, you will have a page that looks like this:

Good luck, and check out my recipes index page or crafty adventures page before you go.