Stretch the page's width and watch it lay out different numbers of columns. Unless you REALLY need something to be tabular, try to avoid <table>...</table> markup.

As for the thumbnails, you should also probably do that work once, instead of having the web server do that work thousands of times. I do it on my local machine, as a part of the process of uploading the images. I don't expect my web server to do any real work beyond delivering bits.

The do thumbnail at loading suggestion is great -- it may seem like a small task to generate the thumbnails dynamically but it always turns out that it is the straw that breaks the camels back when the site gets busy. The two ways I do it (they have different advantages and weaknesses) are: 1: as images are uploaded generate the thumbnails needed (usually in my case a few different sizes for different views). 2: Allow uploads to happen without creating thumbnails, but on first access to each type of thumbnail generate and cache it.

The first way works better when the addition of images to a site are controlled only by your app -- such as with a cgi form. The second works well when users can place images in a directory structure or in some other way to insert into the site without your app knowing about them.


-Waswas

<table border="0" cellpadding="4" cellspacing="1" bgcolor="#000000">
<TMPL_LOOP name="rowloop">
  <tr bgcolor="#ffffff">
    <td valign="top">
      <TMPL_IF name="img1src">
      <img src="/cgi-bin/thumbnail.pl?img=<TMPL_VAR name="img1src">">
      </TMPL_IF>
    </td>
    <td valign="top">
      <TMPL_IF name="img2src">
      <img src="/cgi-bin/thumbnail.pl?img=<TMPL_VAR name="img2src">">
      </TMPL_IF>
    </td>
    <td valign="top">
      <TMPL_IF name="img3src">
      <img src="/cgi-bin/thumbnail.pl?img=<TMPL_VAR name="img3src">">
      </TMPL_IF>
    </td>
    <td valign="top">
      <TMPL_IF name="img4src">
      <img src="/cgi-bin/thumbnail.pl?img=<TMPL_VAR name="img4src">">
      </TMPL_IF>
    </td>
    <td valign="top">
      <TMPL_IF name="img5src">
      <img src="/cgi-bin/thumbnail.pl?img=<TMPL_VAR name="img5src">">
      </TMPL_IF>
    </td>
  </tr>
</TMPL_LOOP>
</table>
[download]

$i = 1;
print "<tr>";
for ( @images ) {
  print "<td>";
  # print image
  print "</td>"
  print "</tr><tr>" if !$i++%5;
}
print "</tr>";
[download]

You have a blank trailing row if the number of images is divisible by 5. Fix:

$i = 0;
$open = 0;

foreach (@images)
# or: while ($sth->fetch)
# or: while (readdir(IMAGE_DIR))
{
   (print "<tr>", $open = 1) unless $open;
   print "<td>";
   # print image
   print "</td>"
   (print "</tr>", $open = 0) unless ++$i % 5;
}

print "<tr>" if $open;
[download]

As a bonus, I wrote the fix such that you don't have to know how many images there are in advance (just like in the original solution). This is very useful when reading from a database.

$count = 0;
while(my $file = readdir(DIR)) {
    print "$file ";
    # can change \n to </tr><tr> here. remember
    # to surround the while with <tr> and </tr>
    print "\n" unless (++$count % 5);
}
[download]

I'd really suggest following halley's suggestion to not use tables, but in response to the last question:

Also, is there any way to resize images WITHOUT Image::Magic or the GD library?

There are plenty of ways, but they're not all scriptable. I've lately been using sips, but ImageMagick is more cross-platform. (and sips won't handle gifs in MacOS 10.3)

There are also programs like GraphicConverter, GIMP, Photoshop, etc.

http://www.home-school.com/test/imagewrap/

This should work on any browser from completely modern to horribly archaic, and the beautiful thing is that it takes LESS page formatting, not more.

That works for the images. But it works for just the images. There's no allowance for captioning, titled links below the images, yada yada

Be Appropriate && Follow Your Curiosity