A Layout for Images
A number of readers asked if I could explain how I arranged the images for the JPIX carnival.
Step one: Gather the images
When there was an image that I wanted to use for JPIX (many of the posts, even if submitted, had multiple photos), I right-clicked on the image and saved it to my hard drive. I tried to name the jpg (the common file format for a photo) by both something in the photo and something in blog’s name.
For example, I named the photo at right lastrose_id.jpg, with the lastrose part being a reminder that post was named “Last Rose” and the id part as a reminder that it is Ilana-Davita’s photo.
After saving a bunch of photos in this way to my hard drive, I had quite a collection, but in some cases I still had to hunt when I got up to the part where I linked the photo online, because some blogs had lots and lots of photos in one post. So in those cases one also might want a reminder of the placement of the photo in the post (middle, 6th, or bottom might be examples to add to the name of the file).
Step Two: Sizing Those Images
So how big to make each of those images? At first I thought to make each one 150px high. After uploading about twenty at 150px high (this was a mistake, I should have just done three and tested those), I decided I preferred 115px high. You will see on the carnival that most are this height (to see the height of a photo, right-click and select Properties), but some were other heights.
In order to resize a photo, you open a photo editing software package and change the height size to 115px. The software should proportionally scale down the width for you.
Step Three, easy: Arranging the Photos
First, I’m going to tell you an easy way. Just upload each photo to your post, line up three on a line, and link each photo to the original post. It might look nice to put a space between each photo. I often do this in code by typing: Here’s an example:
Step Three, complicated: Arranging the Photos with Blog Links
Since I wanted the blog to have the blog links directly under each photo, I used table tags. I will discuss table tags in another post, next week.