Web pages with images

Theo Verelst

Today I was making pictures available on a tclhttpd server, and wanted to make a few hundred automatically sized, compressed (progressive), listed per 10 on a web page as little images with can be clicked on to expand.

The result: http://82.171.148.176/Pictures3/list1.html

I used the cygnus supplied, though separately downloadable, check some search engine, cjpeg/djpeg routines, and used a tcl script to use them on lists of image files:

set j DSC00155b1m ; 
eval "exec /bin/djpeg -scale 1/1 $j.jpg |   /bin/cjpeg.exe  -quality 18 -progressive -outfile $j\_c.jpg"

The djpeg decompresses the source jpeg file, pipe-s it through to cjpeg, which reencodes it with quality 18, which is pretty compressed to another file. These tools are quite high quality, and make compact encoded images look relatively good.

The final commands where like this, to make a small and full scale both quite compressed image set per input image:

set inp $path_to_source_images
set outp $path_to_destination_images

foreach i [glob $inp/*.jpg] {set j [file tail [file rootname $i]] ; eval "exec /bin/djpeg -scale 1/4 $inp/$j.jpg |   /bin/cjpeg.exe  -quality 15 -progressive -outfile $outp/$j\_cs.jpg"}

foreach i [glob $inp/*.jpg] {set j [file tail [file rootname $i]] ; eval "exec /bin/djpeg -scale 1/1 $inp/$j.jpg |   /bin/cjpeg.exe  -quality 25 -progressive -outfile $outp/$j\_cn.jpg"}

Automatically, all .jpg images in the source dir will be encoded in 1/4 size and full size in the dest directory, both with progressive encoding, allowing a browser to start displaying a course impression of the image as soon as a little of the data has been downloaded.

Now we have the target images (you may want to make quality for normal sized images a bit higher, but of course this makes them slower on modem lines), we want to list them on static web pages. It would be possible to do dynamic pages or a Direct_Url, but in this case I wanted fixed pages. These are generated automatically from the image names, and a template page, which looks like this in a text window .tt.t (as is opened by open_text in bwise), which one can easily create of course by:

toplevel .t
pack [text .t.tt]

My template:

<html>
<h2>Theo Verelst Local Picture Pages</h2>
<i>
All recent pictures I made are on these linked pages, see the serial  number.<br>
Click on the small images to see a larger, but quickly loading version.
</i>
<P>
Page  
[expr $page]
 of 
[expr $pmx]
 <a href="/Pictures3/list.html">Picture Page list</a> 
 <a href="/Pictures3/list1.html">First</a> 
<a href="/Pictures3/list
[expr 1+($page-1-1)%($pmx)]
.html">Previous</a> 
<a href="/Pictures3/list
[expr 1+($page-1+1)%($pmx)]
.html">Next</a> 
<a href="/Pictures3/list
[expr $pmx]
.html">Last</a> 
<P>
[append pims]
<P>
<a href="http://www.theover.org">Local Home</a> 
<a href="http://theover.tripod.com">Tripod</a> 
<a href="http://home.tiscali.nl/theoverelst">Bookmark here</a> 
<a href="/Pictures3/list
[expr 1+($page-1+1)%($pmx)]
.html">Next</a> 

</html>

Now we need to use our page generator script to make int(#images/10)+1 pages using this template and the procedure:

proc locpicgen {} {
   set outp "/Docroot/Pictures3/"
   set pmx [expr 0+((5 + [llength [glob $outp/*_cs.jpg]]) / 10)]
   for {set page 1} {$page <= $pmx} {incr page} {
      set pnr [expr 1+(($page-1) * 10)]
      set imlist [lrange [lsort [glob $outp/*_cs.jpg]] [expr $pnr-1] [expr $pnr-1+9]]
      set pims {}; foreach i $imlist {set j [file root [file tail $i]]; append pims "<a href=\"[string range $j 0 end-2]cn.jpg\"><img src=\"$j.jpg\"></a> <b>[string range $j 0 end-3 ]</b> <P>\n"}
      set pagst 0; set pag {}; foreach i [split [.tt.t get 0.0 end] \n] {if {[string index $i 0] == "\["} {; eval append pag $i; set pagst 1;} {if {$pagst == "1"} {set pagst 0} {append pag \n}; append pag $i}}
      set f [open $outp/list$page.html w] ; puts $f $pag ;close $f
   }
   set f [open $outp/list.html w] ; 
   puts $f "<html><h2>Theo Verelst Local Picture Page List</h2>"
   puts $f "Local Picture page numbers, follows links to pages with 10 pictures each<P>"
   for {set page 1} {$page <= $pmx} {incr page} {
      puts $f "<a href=\"list$page.html\"> $page </a><br>"
   }
   puts $f {<P><a href="http://82.168.209.239">Local Home</a> <a href="http://theover.tripod.com">Tripod</a> <a href="http://home.tiscali.nl/theover">Bookmark here</a> <P>}
   puts $f "</html>"
   close $f
}

Call the procedure once:

locpicgen

and presto, lots of pages with neatly listed images.

HJG 2006-01-18 the website above looks offline.

Category Image Processing