|
monkscafe has asked for the wisdom of the Perl Monks concerning the following question:
This seems simple, but has me stumped. I am creating a simple (50 or 60 lines of code) image gallery (yawn) for our graphic designers and I'd like to create columns as to maximize the browser real estate. Right now it just places them one after another in a single column. Like Carl Sagan said, "It's an awful waste of space."
The images from the dir they choose are globbed into an array (@pics). But I can't seem to figure out, with either array references or splicing, how to only meter out only 5 pics per row before creating a new row <tr> and continuing on metering out the array. I've surveyed other image galleries (Image Folio, Schwartz's, etc.) but a simple approach to this (complex?) problem has eluded me. I've been using Perl 'seriously' only about a year now, guess my fundamentals are lacking.
Thanks,
Monk's Cafe |
•Re: simple column/row counter
by merlyn (Sage) on Sep 22, 2002 at 01:39 UTC
|
Here's the pattern, somewhat abstractly:
my @entries = (... 50 or 60 things...);
print "<table etc etc>";
while (@entries) {
my @row_entries = splice @entries, 0, 5;
print "<tr etc etc>";
for (@row_entries) {
print "<td etc etc>";
process $_;
print "</td>";
}
print "</tr>";
}
print "</table>";
-- Randal L. Schwartz, Perl hacker | [reply]
[d/l] |
|
|
Thanks Monks!!! @row_entries= splice (@piclist, 0, 5); was a new concept for me. It doesn't appear in Learning Perl and is only given a cursory glance in Programming Perl.
The final code for this is below. Just set the root of your images directory. Simple and quick. I tried to keep the code readable (and because I'm still a Perl novice).
This displays 5 images per row, then it starts again (thanks Randal!)
Just before the image src HTML, I'm stripping off the full path and assuming the image path is /images/$_
$startdir="/www/intranet/images";
push(@dirs,$startdir);
foreach $dir (@dirs)
{
opendir(DIR,"$dir") || die "opendir $dir failed";
@list = grep(!/^\.\.?$/,readdir(DIR));
closedir(DIR);
foreach $item (@list)
{
$fullname = $dir."/".$item; # add the directory name to th
+e file name
if (-d $fullname)
{
push(@dirs,$fullname);
print "$item<br>";
}
}
}
print "Content-type:text/html\n\n";
&parse;
print qq|
<html>
<head>
<link rel="stylesheet" type="text/css" href="/include/style.css"/>
</head>
<body>
<p>
<form action=/cgi-bin/images.cgi method=post>
<select name=pic>
<option value=$FORM{'pic'} selected>$FORM{'pic'}
|;
foreach $thisdir (@dirs)
{
print qq|
<option value="$thisdir">$thisdir
|;
}
print qq|
<input type=submit value="Go!">
</form>
</html>
|;
opendir(DIR,"$FORM{'pic'}") || die "opendir $dir failed";
@piclist = grep(!/^\.\.?$/,readdir(DIR));
closedir(DIR);
print "<table cellpadding=10 cellspacing=0 width=100%>";
while (@piclist)
{
my @row_entries= splice (@piclist, 0, 5);
print "<tr>";
for (@row_entries)
{
print "<td>";
$FORM{'pic'} =~ s/\/www\/intranet//;
print qq|
<img src=$FORM{'pic'}/$_><br>$_<p>
|;
print "</td>";
}
print "</tr>";
}
sub parse
{
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
@pairs = split(/&/, $buffer);
foreach $pair (@pairs)
{
($name, $value) = split(/=/, $pair);
$value =~ tr/+/ /;
$value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
$FORM{$name} = $value;
}
}
| [reply]
[d/l]
[select] |
|
|
This is totally cool! I have been working on a vary similar thing for a web-based photo gallery. I had users picking a category (directory) from a form, then generated a page of images and text description by
| [reply]
[d/l]
[select] |
|
|
I thought this code was really neat because I was working on something similar. So I took it and made some changes, that hopefully improve it.
I also broke it up into two files because of some of the other things I'm going to add for my specific project.
I would be interested to know if anybody else has suggestions on how to make it better, just to help me learn.
Also, even though it works for me, I really don't understand what the line $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; is doing. If anybody can help shed some light on that, I'd appreciate it.
| [reply]
[d/l]
[select] |
Re: simple column/row counter
by rir (Vicar) on Sep 22, 2002 at 02:49 UTC
|
#!/usr/bin/perl -w
use strict;
# save & localize $, as necessary
my @pics = qw( pic0 pic1 pic2 pic3 pic4 pic5 pic6 pic7);
my $pic_preface = " pre ";
my $pic_suffix = " suf ";
my $next_row = " end_row\n";
my $table_end = "\ntable end\n";
my $pics_per_row = 5;
{ my $i;
for ( $i=1; $i <= @pics; $i++) {
print "$pic_preface", $pics[$i-1];
print ( 0 == $i % $pics_per_row ? $next_row : $pic_suffix);
}
print $next_row unless 0 == $i % $pics_per_row;
print $table_end;
}
| [reply]
[d/l] |
Re: simple column/row counter
by Cody Pendant (Prior) on Sep 22, 2002 at 02:46 UTC
|
This is what occurred to me:
@pics = (1..100);
for($x=0;$x<@pics;$x++){
print "displaying pic number $pics[$x] \n";
if (($x+1) % 5 == 0){ # because zero mod 5 is zero too
print "...and starting a new row.\n";
}
}
--
($_='jjjuuusssttt annootthheer
pppeeerrrlll haaaccckkeer')=~y/a-z//s;print;
| [reply]
[d/l]
[select] |
Re: simple column/row counter
by BrowserUk (Patriarch) on Sep 22, 2002 at 03:14 UTC
|
opendir DIR, $picdir or die $!;
@pics = grep{ -f $_ } <DIR>;
closedir DIR or warn $!;
print start_table;
for my $i (0 .. ($#pics/5+1)) {
my $row = map{
td( a( [
href=>"$baseurl/$_",
alt =>$_
]) )
} @pics[$i*5 ..($i*5)+4];
print Tr( $row );
}
print end_table;
Cor! Like yer ring! ... HALO dammit! ... 'Ave it yer way! Hal-lo, Mister la-de-da. ... Like yer ring! | [reply]
[d/l] |
Re: simple column/row counter
by Django (Pilgrim) on Sep 22, 2002 at 12:18 UTC
|
#usr/bin/perl
use strict;
use warnings;
my @Pics; # test data
push @Pics, "/pics/pic_$_.jpg" for (1..13);
my @Cells;
push @Cells,
qq| <td><img src="$_"><br></td>\n|
for (@Pics);
my @Rows;
while (@Cells) {
my @Row;
push @Row,
shift(@Cells) || " <td><br></td>\n"
for (1..5);
push @Rows,
" <tr>\n",@Row," </tr>\n";
}
print "<table>\n",@Rows,"</table>\n";
__END__
<table>
<tr>
<td><img src="/pics/pic_1.jpg"><br></td>
<td><img src="/pics/pic_2.jpg"><br></td>
<td><img src="/pics/pic_3.jpg"><br></td>
<td><img src="/pics/pic_4.jpg"><br></td>
<td><img src="/pics/pic_5.jpg"><br></td>
</tr>
<tr>
<td><img src="/pics/pic_6.jpg"><br></td>
<td><img src="/pics/pic_7.jpg"><br></td>
<td><img src="/pics/pic_8.jpg"><br></td>
<td><img src="/pics/pic_9.jpg"><br></td>
<td><img src="/pics/pic_10.jpg"><br></td>
</tr>
<tr>
<td><img src="/pics/pic_11.jpg"><br></td>
<td><img src="/pics/pic_12.jpg"><br></td>
<td><img src="/pics/pic_13.jpg"><br></td>
<td><br></td>
<td><br></td>
</tr>
</table>
~Django
"Why don't we ever challenge the spherical earth theory?"
| [reply]
[d/l] |
Re: simple column/row counter
by joe++ (Friar) on Sep 26, 2002 at 14:14 UTC
|
Hi,
No Perl solution, but even better for maximizing the browser's real estate:
put every single image into a
<div style="float:left;..."> element and the images will flow left-to-right, top-to-bottom in the visible browser area.
<div style="float:left;padding:8px;">
<img src="yadda..." alt="Nice pic" />
</div>
Just my $0.02...
--
Cheers, Joe | [reply]
[d/l] |
|
|
