Building a Photo Gallery
++++++++++++++++++++++++

:Posted: 2009-05-05 14:31
:Tags: Python

.. caution:: 

    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:

* Scan the ``Photos`` directory for sub-directories
* Create 6 new directory structures mirroring the structure of the ``Photos`` directory:

  ``stills``
      One frame stills of the each of the videos
  
  ``h264``
      Flash Player 9/10 compatible videos 
  
  ``1024``
      Photos resized to a maximum size of 1024x1024
  
  ``150``
      Thumbnails 150x150 zoomed in on the centre of the photo to make a square and slightly sharpened
  
  ``exif``
      The EXIF/metadata extracted from each of the original files
  
  ``meta``
      Extra metadata I want to add to the photos or videos
* Populate each of the new directories

Setting up ffmpeg
=================

.. caution ::

   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:

* http://www.getlifebox.org/tag/x264/
* http://ubuntuforums.org/showthread.php?t=786095

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
    ./configure
    make
    sudo checkinstall --pkgname=yasm --default
    sudo dpkg -i yasm*.deb
    cd ~/
    git clone git://git.videolan.org/x264.git
    cd x264
    ./configure --enable-shared
    make
    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
    cd
    wget http://ftp.penguin.cz/pub/users/utx/amr/amrwb-7.0.0.3.tar.bz2
    tar jxfv amrwb-7.0.0.3.tar.bz2
    cd amrwb-7.0.0.3/
    ./configure
    make
    sudo make install
    cd
    wget http://ftp.penguin.cz/pub/users/utx/amr/amrnb-7.0.0.2.tar.bz2
    tar jxfv amrnb-7.0.0.2.tar.bz2
    cd amrnb-7.0.0.2/
    ./configure
    make
    sudo make install
    cd
    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
    make
    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:

* http://www.imagemagick.org/Usage/

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 <building_a_gallery/video.png>`_ (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 <building_a_gallery/hdvideoplayer.zip>`_.