WARNING: This page is archived and not updated. Please bear in mind any information may be incorrect and any code may not work. Use at your own risk.
James Gardner: Home > Blog > 2009 > Building a Photo Gallery

Building a Photo Gallery

Posted:2009-05-05 14:31


I'm not an expert in this area so take this with a pinch of salt!

Back in 2002 when I last had photos online I used a conversion script to create thumbnails. Today I need to handle videos as well as images. Back then I also maintained a database of all the photos and added my own metadata as well as data I extracted from the EXIF information. This time I want to keep all the data separate in text files so that it can easily be recreated.

All my photos and videos are in a directory called Photos and each sub-directory represents a DVD's worth of photos and videos in a series of un-structured sub-directories.

My approach for the gallery is as follows:

Setting up ffmpeg


Because lots of the vidoes I have are in proprietory formats, I need a series of proprietory codecs which means I have to compile ffmpeg from scratch and cannot share the binary with you. The best I can do is share the instuctions for how to compile it yourself on Ubuntu Intrepid so you can use it yourself - but you won't be licensed to distribute it either.

I don't know a great deal about video except that H264 offers excellent compression, verg high quality and can be played by recent versions of Flash player. As a result it is the video format of choice for the gallery.

I followed a combination of these two guides:

Neither guide quite worked for me but a combination did. In particular I needed the --enable-libamr-nb --enable-libtheora --enable-libvorbis --enable-libamr-wb flags Here are the exact commands I used (Ubuntu 8.10, 3rd May 2009):

sudo apt-get purge ffmpeg x264 libx264-dev
sudo apt-get install build-essential subversion git-core \
checkinstall texi2html libfaac-dev libfaad-dev \
libmp3lame-dev libtheora-dev libxvidcore4-dev
cd ~/
wget http://www.tortall.net/projects/yasm/releases/yasm-0.7.2.tar.gz
tar xzvf yasm-0.7.2.tar.gz
cd yasm-0.7.2
sudo checkinstall --pkgname=yasm --default
sudo dpkg -i yasm*.deb
cd ~/
git clone git://git.videolan.org/x264.git
cd x264
./configure --enable-shared
sudo checkinstall --fstrans=no --install=yes --pkgname=x264 \
--pkgversion "1:0.svn`date +%Y%m%d`-0.0ubuntu1" --default
sudo ldconfig
sudo dpkg -i x264*.deb
wget http://ftp.penguin.cz/pub/users/utx/amr/amrwb-
tar jxfv amrwb-
cd amrwb-
sudo make install
wget http://ftp.penguin.cz/pub/users/utx/amr/amrnb-
tar jxfv amrnb-
cd amrnb-
sudo make install
svn checkout svn://svn.ffmpeg.org/ffmpeg/trunk ffmpeg
cd ffmpeg
./configure --enable-gpl --enable-nonfree --enable-pthreads --enable-libfaac --enable-libfaad --enable-libmp3lame --enable-libtheora --enable-libx264 --enable-libxvid --enable-libamr-nb --enable-libamr-wb
sudo mkdir /usr/local/lib/pkgconfig
sudo mkdir /usr/local/include/libavdevice
sudo mkdir /usr/local/include/libavformat
sudo mkdir /usr/local/include/libavcodec
sudo mkdir /usr/local/include/libavutil
sudo mkdir /usr/local/include/libswscale
sudo mkdir /usr/local/share/ffmpeg
sudo mkdir /usr/lib/vhook
sudo checkinstall --fstrans=no --install=yes --pkgname=ffmpeg --pkgversion "3:0.svn`date +%Y%m%d`-12ubuntu3" --default
sudo dpkg -i ffmpeg*.deb
sudo ln -s /usr/local/lib/libamrnb.so.3 /usr/lib/libamrnb.so.3
sudo ln -s /usr/local/lib/libamrwb.so.3 /usr/lib/libamrwb.so.3

Creating the H264 Video

Here's the command I use to create the videos:

/usr/local/bin/ffmpeg -y -i ../Desktop/untitled\ folder/CIMG2750.AVI -pass 1 -vcodec libx264 -vpre fastfirstpass -b 512k -bt 512k -threads 0 -f mp4 -an /dev/null && /usr/local/bin/ffmpeg -i ../Desktop/untitled\ folder/CIMG2750.AVI -pass 2 -acodec libfaac -ab 128k -ac 2 -vcodec libx264 -vpre hq -b 512k -bt 512k -threads 0 -f mp4 ../Desktop/output.mp4

This compresses a 14Mb file down to 1.1Mb with no really noticable loss of quality (it was an underwater video anyway).

Extracting the EXIF Data from JPEGs

Install exiv2:

sudo apt-get install exiv2

Then extract data like this:

exiv2 pr Desktop/CIMG2745.JPG > exif.txt

Resizing an Image

Install ImageMagick and ufraw (for raw camera images)

sudo apt-get install imagemagick ufraw dcraw

You can do this fairly easily like this, only resizing images greater than 1024x1024 in either dimension.

convert -auto-orient -thumbnail 1024x1024> -unsharp 0x.5 input.JPG output.jpg

Creating a High Quality Thumbnail

I used to create a 100x100 thumbnail, scaled so that the whole photo is visible. This time I want to use 150x150 thumbnails but zoomed in a little so that the image fills the square. I've also found in the past that thumbnails can look a little blurry so I want to sharpen them up a bit. We can also strip the EXIF data from the thumbnails (the -thumbnail option does this anyway.

Run the command:

convert -auto-orient -thumbnail x150 -crop 150x150+0+0 +repage -gravity center -unsharp 0x.5 input.JPG thumb.jpg

See also:

Generating Stills

This is the command I use to create a thumbnail from CIMG2750.AVI. Notice the -ss 00:00:08.5 part. This says to take the still from 8.5 seconds into the video:

ffmpeg -i CIMG2750.AVI -an -ss 00:00:08.5 -an -r 1 -vframes 1 -y thumb.jpg

The full size stills go in the stills directory but also need to be resized to go in the thumbnails directory.

Overlaying a Video Icon

I like to overlay a video icon on the video thumbnails so it is clear what they are. Here's one I made (transparent PNG):

wget http://jimmyg.org/blog/2009/building_a_gallery/video.png

Here's how to use it:

convert -auto-orient -thumbnail x150 -crop 150x150+0+0 +repage -gravity center -unsharp 0x.5 test.jpg -draw "image over  0,0 150,150 'video.png'" thumb.jpg

The 0x0 150,150 part means start the video image at 0,0 on the thumbnail and make it 150x150 pixels wide.

Flash Video Player

This was the most promising open source flash HD player I found: http://www.weberdesignlabs.com/blog/?p=24. Unfortunately it doesn't allow configuration of which video to play unless you have Adobe CS3. Luckliy someone in the comments left this version: http://drop.io/fg9dhch. You can configure it in the HTML and it seems to work well. There is a copy here.

(view source)

James Gardner: Home > Blog > 2009 > Building a Photo Gallery