Just to maybe give you some ideas on how to do this, here are a few scripts I wrote to display thumbnails and images. Just run the script in a directory of jpgs and load the index.html it creates.

I found you can do it easily either with Image::Magick or Imager. They will handle the resizing a bit differently. So you might want to check out the differences between Imager and Image::Magick. In 1 scenario, you need to decide if you want to have a constant width or height for the thumbnails; in the other scenario, you reduce them by a percentage, but you must save the new thumbnail dimensions so the html display won't get distorted.

With Image::Magick 

#!/usr/bin/perl
use warnings;
use strict;
use Image::Magick;
use Cwd;

#watch the width of your picture names 
#they can widen the table cells if too long 
umask 0022;
my $image = Image::Magick->new;
my $count = 0;
my $dir = cwd;

open(HEADER,">header.html");
print HEADER<<End_Header;
<html>
<BODY Text="#99CCFF"  BGCOLOR="#000000">
<center><h1>Thumbnails for $dir</h1></center>
</body>
</html>
End_Header
close HEADER;

open(INDEX,">index.html");
print INDEX<<End_Index;
<html>
<head>
<TITLE>Thumbnails</TITLE>
<link rel="icon" href="favicon.ico">
</head>
<frameset rows="70,*" border="0">
 <frame name="header" src="header.html" marginwidth="0" marginheight="
+0" scrolling="off" frameborder="0">
  <frameset cols="130,*" border="0">
    <frame name="left" src="left.html" marginwidth="5" marginheight="5
+" scrolling="yes" frameborder="5">
    <frame name="main" src="main.html" marginwidth="5" marginheight="5
+" scrolling="yes" frameborder="5">
  </frameset>
</frameset>
</html>
End_Index
close INDEX;

open(MAIN,">main.html");
print MAIN<<End_Main;
<html>
<BODY TEXT="#FFCCCC" BGCOLOR="#000000">
<center><h1>Click thumbnails at left to view</h1></center>
</body>
</html>
End_Main
close MAIN;


open(OUT,">left.html");
print OUT<<End_Header;
<html>
<body>
<table align=left bgcolor=9999CC border=2 cellpadding=2 cellspacing=2>
<tr>
End_Header

my @pics= <*.jpg>;

   foreach my $pic (@pics){
      $count++;
      my ($picbasename) = $pic =~ /^(.*).jpg$/;
      my $ok;
      $ok = $image->Read($pic) and warn ($ok);
      my ($w,$h)= $image->Get('columns','height');
      my $thumb = $picbasename . '-t.jpg';
      $ok = $image->Scale(geometry => '100x100')and warn ($ok);
      $ok = $image->Write($thumb)and warn ($ok);
      my ($tw,$th)= $image->Get('columns','height');
      my $picoptions= $w.'x'.$h.'x'.$tw.'x'.$th;
      print "$pic\t$picoptions\n";
      undef @$image;

print OUT<<EOTR;
<td align=center><a href="$pic" target=main  HEIGHT=$h WIDTH=$w alt="[
+$pic]"><img alt= [$pic-thumbnail] src=$thumb height=$th width=$tw></a
+><br>$pic</td>
EOTR
if($count == 1){print OUT "</tr><tr>"; $count = 0};
}

print OUT<<EOHTML;
</tr>
</table>
</body>
</html>
EOHTML

close OUT;
__END__

[download]

With Imager ######################################### 

#!/usr/bin/perl
use warnings;
use strict;
use Imager;
use Cwd;
use File::Basename;

#but imager makes it easy opening different file types 

#watch the width of your picture names 
#they can widen the table cells if too long 
umask 0022;
my $image = Imager->new();
my $count = 0;
my $dir = cwd;
my @exts = qw(.jpg .png .gif); # list allowed extensions 
my @pics= <*.jpg *.gif *.png>;

open(HEADER,">header.html");
print HEADER<<End_Header;
<html>
<BODY Text="#99CCFF"  BGCOLOR="#000000">
<center><h1>Thumbnails for $dir</h1></center>
</body>
</html>
End_Header
close HEADER;

open(INDEX,">index.html");
print INDEX<<End_Index;
<html>
<head>
<TITLE>Thumbnails</TITLE>
<link rel="icon" href="favicon.ico">
</head>
<frameset rows="70,*" border="0">
 <frame name="header" src="header.html" marginwidth="0" marginheight="
+0" scrolling="off" frameborder="0">
  <frameset cols="130,*" border="0">
    <frame name="left" src="left.html" marginwidth="5" marginheight="5
+" scrolling="yes" frameborder="5">
    <frame name="main" src="main.html" marginwidth="5" marginheight="5
+" scrolling="yes" frameborder="5">
  </frameset>
</frameset>
</html>
End_Index
close INDEX;

open(MAIN,">main.html");
print MAIN<<End_Main;
<html>
<BODY TEXT="#FFCCCC" BGCOLOR="#000000">
<center><h1>Click thumbnails at left to view</h1></center>
</body>
</html>
End_Main
close MAIN;


open(OUT,">left.html");
print OUT<<End_Header;
<html>
<body>
<table align=left bgcolor=9999CC border=2 cellpadding=2 cellspacing=2>
<tr>
End_Header

foreach my $pic (@pics){
      $count++;
      my ($basename,$path,$suffix) = fileparse($pic,@exts);

      $image->open(file=>$pic) or die $image->errstr();
#      my $w = $image->getwidth(); 
#      my $h = $image->getheight(); 

      # Create smaller version 
      my $thumb = $image->scale(xpixels=>100);

      #$basename.="-t$suffix"; #keeps same ext 
      $basename.='-t.jpg'; #make all thumbs as jpg 
      print "Storing image as: $basename\n";
      $thumb->write(file=>$basename, jpegquality=>30) or die $thumb->e
+rrstr;
#      my $tw = $thumb->getwidth(); 
#      my $th = $thumb->getheight(); 

print OUT<<EOTR;
<td align=center><a href="$pic" target=main alt="[$pic]"><img alt= [$p
+ic-thumbnail] src=$basename ></a><br>$pic</td>
EOTR
if($count == 1){print OUT "</tr><tr>"; $count = 0};
}

print OUT<<EOHTML;
</tr>
</table>
</body>
</html>
EOHTML

close OUT;
__END__

[download]
I'm not really a human, but I play one on earth. flash japh

In reply to Re: jpg file demensions by zentara
in thread jpg file demensions by kmarshall

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.