A continuation of A Layout for Images
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:
Red Tree on Raritan Avenue |
Bunch of Yellowy Leaves |
Red ‘n Yellow Leaves |
Other image layout solutions:
- Flickr Collage Tool (Also works with Photobucket)
- Word Press Image Gallery
- Mosaic Maker (I haven’t use this, but I’ve seen nice results on other blogs)
Thank you Leora. I was getting very frustrated as blogger seems to have many issues, but getting to know something new isn’t easy either. But I have to say that your blog inspired me as you know what you are doing with this stuff. I am kind of dissapointed that I can’t put photos along the side..but there are other advantages and hopefull viewable with all browsers..
That’s double Dutch to me! And I thought I understood one or two things about code.
Michelle, you should be able to put photographs on the side. I have one photograph of me on the side. But get used to the basics of WordPress, first.
Ilana-Davita, if you can get the previous post, A Layout for Images, you can get pretty far with thumbnails. Using tables makes your code rather messy, even if you are used to tables. But I know them well, so I sometimes use them in blogging to get neat alignments.
I’ve never tried putting pictures in a row like that, but if I do then a table sounds like a great idea. The code looks like so much fun to go through.
It all makes sense. Except what does the alt tag do?
I think I’m gonna do a post with pictures to see if I can get the table right. Just for fun.
Jewish Side aka Babysitter,
Maybe I’ll explain the “alt” tag in another post. You can always Google it in the meantime (Google “alt HTML”).
ok so I was too lazy to figure out the HTML of it all, so I just used a regular table. But the pictures weren’t all equal sizes so it kinda came out weird.