In these two posts, JPIX and Good Evening New Jersey, I used <table> code to set up a page with many thumbnails. Why did I choose <table> tags? The JPIX post best illustrates the reason; one gets a lot of control over how the images and linked text will appear.
Here’s an example. Let’s say I wanted to post these four autumn thumbnails in one post, and I wanted to put little linked captions under each one:
Orangey Tree Yellowy Tree
Buncha Leaves Tree on Raritan Avenue
Do you see the problem here? Those captions are not lining up neatly under their photos. So I’m going to put each photo with its caption in a cell (the cell tag looks like <td>), and all these cells will be placed in a row (<tr>) in a table. I could create more than one row, but for this example, one row is enough.
If you are really going to attempt this method, I suggest you familiarize yourself with HTML table code. You can start with this table tutorial or read the W3 Consortium page on tables. Also, look at the source code for the posts I mentioned at the start of this post that use tables (in Firefox, one can see source code by selecting View – Page Source).
If I haven’t scared you away yet, here’s how the code will look for a table of three of those thumbnails in a row, with captions under each photo:
<table>
<tr>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=fallen_leaves038.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_fallen_leaves038.jpg” alt=”red tree” title=”th_fallen_leaves038″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3746″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=fallen_leaves038.jpg”>Red Tree on Raritan Avenue</a></td>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=autumn018.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_autumn018.jpg” alt=”yellow leaves” title=”th_autumn018″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3745″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=autumn018.jpg”>Bunch of Yellowy Leaves</a></td>
<td><a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=autumn014.jpg”><img src=”https://www.leoraw.com/blog/wp-content/uploads/2008/11/th_autumn014.jpg” alt=”leaves” title=”th_autumn014″ width=”160″ height=”120″ class=”alignnone size-medium wp-image-3744″ /></a>
<a href=”http://s421.photobucket.com/albums/pp294/eema3kids/?action=view¤t=autumn014.jpg”>Red ‘n Yellow Leaves</a>
</td>
</tr>
</table>
And that produces:
Other image layout solutions:
Excluding the first photo with the red and yellow trees and the hanging shoe, the five sunset shots were taken within minutes of each other. I decided to use the Word Press photo gallery to set up this post. Unfortunately, you have to click twice to get the larger image, and then you have to use the back button to get back to the main post. Maybe Word Press 2.7 will improve this tool?
For more Skywatch participants, please visit:
I took this photo last July at the Jaffa Gate outside the Old City of Jerusalem. I’ve wanted to post it, but I needed to rework the face in Photoshop so her face is no longer recognizable.
Why is she looking up, but holding the prayer book in her hand? Is it a book of Tehillim (Psalms)? What is distracting her?
American flags were flying high today in honor of Veterans Day on Raritan Avenue, the main street (also known as Route 27) that runs through the center of Highland Park.
My neighbor down the block had these pretty flowers growing in front of her house about a month ago. Neither she nor I know the names of the pink flowers. I suspect that the orange ones are probably a zinnia (thanks to readers who confirmed this). Anyone know about the little pink ones?
Today’s Flowers is hosted by Luiz Santilli Jr. Thank you, Luiz, for this lovely meme.
It’s been a beautiful autumn here in Central New Jersey. The color is everywhere; I think the weather has been cooler and damper than previous autumns, and the trees are loving it.
These top two photos were both taken on my block. The one with the window is directly across the street, and the other, with the reds to each side and yellow in center, is looking down the block.
These last two photos were taken outside my kids’ school, which is in Edison, New Jersey, just over the border from Highland Park.
How does it look where you live?
More links to beautiful autumn photos on Carmi’s Thematic Photographic: Autumn post
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.
To be continued…
I was in the mood to post a cheery photo, and here’s a great one of the daughter and me. I don’t recall who took the photo; it was a year and a half ago on Purim, a holiday where kids get dressed up, and my daughter was dressed as a Prima Ballerina. It was taken at our synagogue, Congregation Etz Ahaim of Highland Park, New Jersey.
I made this sepia in Photoshop by desaturating the photo and then moving the color sliders to increase the yellow and magenta.
I took this photo in September when we visited Lee Turkey Farm. It seemed like a good photo for 2sweetnsaxy’s Water Wednesday meme. Feel free to offer a caption for the photo.
I really wanted to get a photo of Donaldson Park from up high. It is a big county park on the edge of Highland Park, and the Raritan River flows right next to the park. I couldn’t get the whole park, but I got a nice tip of it in this photo. It’s on the right of that white streak in the river.
In order to get this photo, however, I had to park my car on a side street near this busy highway, Route 1, which runs from Maine to Florida (I think). The bridge goes bump, bump, bump as all the cars go over it. I don’t think I’ll be venturing out like this again. I got too nervous from all the cars and bumps.
On my way back to my car, I photographed these pretty fall oak leaves.
