Using Perl to build a table of images
I had a very large folder of images that I needed to build a tale of, as well as links for the images. I wrote a perl script to read the directory and build the table based upon the image file names in the folder. For our purposes here I am simplifying the script.
#!/usr/bin/perl
use File::Copy;my $columns = "5";
my $srcpath = 'pics/';opendir (SOURCEDIR, $srcpath) or die "Can’t open sourcedir " . $!;
my @comprehensivedir = readdir SOURCEDIR;
foreach my $file(@comprehensivedir){
if ($srcpath.$file){
push (@files, $file) unless $file =~ /^\./;
my $arrayRef = \@files;
}
}
my $length = @files;&chunkTabs(@files);
#iterate through the files and add them to the proper tags
sub chunkTabs(){
print "<table id=\"imageTable\" >\n";
for (my $y = 0; $y < $length; $y++) {
print "<tr>\n";
for (my $i = 0; $i < $columns; $i++ ) {
my $img_file = $files[$y];
if ($img_file){
print ‘<td class=”thumbs”><img src=”pics/’.$img_file.’” class=”imageTable” /></td>’.”\n”;
}
else {
print ‘<td> </td>’.”\n”;
}
$y++;
}
$y = $y -1;
print “</tr>\n”;
}
print “</table>\n”;
}
I made 25 images and put them in a folder named pics. I ran the perl script on that folder and this is the table it built.
<table id="imageTable" >
<tr>
<td class="thumbs"><img src="pics/img_01.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_02.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_03.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_04.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_05.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_06.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_07.png" class="imageTable" /></td>
</tr>
<tr>
<td class="thumbs"><img src="pics/img_08.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_09.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_10.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_11.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_12.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_13.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_14.png" class="imageTable" /></td>
</tr>
<tr>
<td class="thumbs"><img src="pics/img_15.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_16.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_17.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_18.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_19.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_20.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_21.png" class="imageTable" /></td>
</tr>
<tr>
<td class="thumbs"><img src="pics/img_22.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_23.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_24.png" class="imageTable" /></td>
<td class="thumbs"><img src="pics/img_25.png" class="imageTable" /></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
You can see that I set the $columns variable to 7. That made seven 4 rows of seven tds. The last row since it only had 4 images, it built three tds with non-breaking space in the td. Here is what the table looks like with the images I made for this purpose.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
If I change the $columns variable to 5 it builds this table.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
In my case I needed a table of thumbnail images with an href wrapped around the image with the large image name in the href so I could build a thickbox gallery. So I also had regular expressions here that grabbed the name with thumbs in it, took it out and added it to the href. This sure beat copying and pasting the file name into all the img tags and hrefs. I suppose you could do all sorts of things with it. Use it however you like.
























