TWiki Photo Album

One of the common features of "vanity" websites is a photo album where you can put pictures of your family so people can easily choose not to look at them. My vanity website is no different, and now that I've got a digital camera I expect to be generating much more content than I was before; content that all but about 10 people on the planet will consider boring. My Dad also has a new camera, and I'd like to have a way for him to upload pix to my machine without having to hassle with FTP, rsync, etc.

I've spent a fair amount of time looking around for software to build online photo albums and my God there's a lot of it, and so far it all sucks. As it turns out, though, TWiki makes a pretty good photo album more-or-less right out of the box! The trick is to set the ATTACHEDIMAGEFORMAT variable in TWiki.TwikiPreferences so that it makes a little table with the picture and the comment. You can set the img tag so that the picture is shrunk to a smaller size and then make a href to the full-size picture.

Basically after 10 minutes of configuring TWiki you'll have a better photo album environment than 90% of the special-purpose programs out there, along with all of the other wiki wiki goodness. Because you're in a wiki, you can upload your pictures and then go back and add additional comments or other chrome without having to re-generate the pages. Nice!

In case you're interested, here's the value that I set ATTACHEDIMAGEFORMAT to. It makes a table with the image on the left and the comment on the right. The image will be displayed at a width of 400 pixels, and it will be a link to the full-sized image. It seems to work in both NS and IE. Note that this data won't display correctly but you can look at the source of this page and cut-n-paste from there:

$comment

One Problem with this approach now fixed, see below

Even though the images appear small, they're really full-sized as they're sent over the network so the pages consume a lot of bandwidth. What's needed is a TWiki plug-in which can generate image "thumbnails" on the fly. I'll look into this...

-- TobyCabot - 21 Jan 2002

Hmmm. Should have looked (again... I did look yesterday, when this page was not yet there...) before I posted my ImageGallery project, it seems. I'm working on a plugin which will do just this, create preview pages and thumbnail images, etc...

-- FrankDeLange - 21 Jan 2002

Ah all so excellent! I've been thinking about doing something like this for ages. Share and share alike!

-- MartinCleaver - 21 Jan 2002

Frank, the ImageGallery looks like an interesting approach, and more's the better if you know of an existing CGI that doesn't suck. I was going to just hack on the perlmagick examples until they dtrt, since the only thing that I was planning on building is the on-the-fly thumbnail generation (TWiki seems to do the rest already).

It looks as if your plans are more ambitious than mine, though, so go for it!

-- TobyCabot - 24 Jan 2002

OK, I've hacked a little hack to create thumbnails which you can reference in the topic page. It uses the Image::Magick module, so you'll need to install that. The theory of operation is that we create a small thumbnail file during the file upload process, and we reference that thumbnail in the <img> tag of the ATTACHEDIMAGEFORMAT variable.

To install, patch the upload script and modify the TWiki.TWikiPreferences topic as follows:

      * Set ATTACHEDIMAGEFORMAT = <table width="100%"><tr><td width="30%"><a href="%ATTACHURLPATH%/$name"><img src="%ATTACHURLPATH%/$name.thumb.jpeg" alt="$comment"/></a></td><td>&nbsp;$comment</td></tr></table>

You can modify the size and quality of the thumbnail by modifying the source code - that should probably be configurable.

Note: I'm not a perl hacker, and I'm TWikiNaive, so code suggestions/enhancements are appreciated.

-- TobyCabot - 27 Jan 2002

I just posted a new plugin NavPlugin that is a simple way to present a number of TWiki pages in an order... like a document or a presentation would be. It occured to me that this could also be used for a photo album.

-- MikeBarton - 30 Jan 2002

Toby - if you could install it somewhere I'd love to take a look at the presentation. Thanks. M.

-- MartinCleaver - 06 Feb 2002

Toby, the twiki-upload.patch works great (redhat linux 7.2 on intel, using apache). But when you rename an image attachment, the thumbnail does not get renamed with it. Here's a simple fix: twiki-rename.patch.txt but it patches lib/TWiki/Store.pm (not bin/rename ), so i sort of misnamed it (but I don't have permission to fix the name, so I won't).

-- StrickYak - 07 Feb 2002 - http://i.yak.net/twiki/bin/view/Main/StrickYak

One more note on Toby's thumbnailing. I made it apply regardless of whether a thumbnail is now being appended to the page or not. (I did this because I've made an AllPixPlugin that displays a table of thumbnails of all picture attachments, so we don't need to ask for links as we upload.)

Here's the diff from Toby's posted version to mine:

*** bin/upload  2002/01/30 00:51:55     1.2
--- bin/upload  2002/02/07 23:00:19     1.4
***************
*** 433,442 ****
                  $fileDate, $fileUser, $fileComment, $hideFile, $meta );
      }

      if( $createLink ) {
-         my $filePath = &TWiki::Store::getFileName( $webName, $topic, $fileName );
-         # create a thumbnail image - 2002-01-27 toby@caboteria.org
-         createThumbnail( $filePath );
          $text = addLinkToEndOfTopic( $text, $filePath, $fileName, $fileComment );
      }

--- 433,443 ----
                  $fileDate, $fileUser, $fileComment, $hideFile, $meta );
      }

+     # create a thumbnail image - 2002-01-27 toby@caboteria.org
+     my $filePath = &TWiki::Store::getFileName( $webName, $topic, $fileName );
+     createThumbnail( $filePath );
+
      if( $createLink ) {
          $text = addLinkToEndOfTopic( $text, $filePath, $fileName, $fileComment );
      }

-- StrickYak - 07 Feb 2002

Now here's my very simple plugin for image galleries. It only defines one new macro %ALLPIX% which turns into a table of all the image attachments that have thumbnails using Toby's convention: the thumbnail files have ".thumb.jpeg" appended to the name of the fullsize image.

Just take off the ".txt" and drop it into .../lib/TWiki/Plugins/ and make a topic Plugins.AllPixPlugins and then it should work.

* AllPixPlugin.pm.txt: the plugin for %ALLPIX%

Here is an example page using this plugin: http://i.yak.net/twiki/bin/view/Lca/PixPage2

-- StrickYak - 07 Feb 2002

StrickYak: good work, thanks!

MartinCleaver: see http://www.caboteria.org/wiki/bin/view/Main/TobyBday1995Pix

-- TobyCabot - 09 Feb 2002

After some searchig I found where/how to make the AllPixPlugin Topic. As it is very basic, could this plugin not be zipped up with the correct topic?

What would be nice now are some parameters for the AllPixPlugin to control

• number of columns
• size of the thumbnails displayed (incl. option to not set a fixed size)

Finally, what was not exactly clear was the name of the thumbnail. After some testing I found that for a picture named Picture.jpg, the thumbnail must be named Picture.jpg.thumb.jpeg. I had first tried Picture.thumb.jpeg.

-- MathiasKoerber - 29 Dec 2002

Due to the new TWiki release and its renewed StoreDotPm, the rename-patch doesn't work any longer. Has someone get it to work with the new release and can provide a patch?

-- AndreUlrich - 11 Apr 2003

Toby's thumbnailing worked fine with me, but I can't make AllPixPlugin work. Also I couldn't patch StrickYak's diff with Toby's upload.cgi (given above) - patching failed creating a .rej file. Could anyone advise?

-- VeraDanilyan - 17 Apr 2003

Vera, One thing to check is the linefeeds in StrickYak's plugin, which emacs at least thinks are Mac format. It didn't work for me (i.e. didn't show up in the "Currently Activated Plugins" list on the TWiki.TWikiPreferences page) until I converted it to Unix linefeeds. Then it worked fine.

I'm learning more about the "JFIF" picture format that my camera (and many others, evidently) produces. It turns out that the image file has a little thumbnail image in it that's generated by the camera. It also has lots and lots of metadata such as date, focal length, shutter speed, etc. So I think that a better approach to this plugin would be to use a tool (like jhead http://www.sentex.net/~mwandel/jhead/ which is packaged with Debian) to read the thumbnail out of the image file on the fly. Live and learn...

(Problem: most image manipulation tools mangle the JFIF thumbnail when they for example rotate the image. Feh. TC )

-- TobyCabot - 15 Aug 2003

See also ImageGalleryPlugin.

-- TobyCabot - 26 Sep 2003

See also MultipleAttachmentsAtOnce which could be useful here. Uploading images file-by-file has turned out to be painful enough that I rarely do it.

-- TobyCabot - 03 Apr 2004

UploadToTWikiAddOn solves the problem I mentioned in my previous post.

-- TobyCabot - 09 Mar 2008