Skip to content

zenphoto movie and ffmpeg tricks


Recently, I switched from gallery2 to zenphoto for a few reasons, which are of course biased by my experience with these packages.

  • The development tends towards straight-forward and simple approaches; this tends to break apart more as legacy things are carried forward, which I feel might be the problem with gallery
  • Nice set of ajax editing options; it was really hard for friends and family to understand how to edit captions and titles, the ajaxy part of zen took care of that
  • Easy to dump files into repository; instead of indexing everything via web interface, you can just upload files quite easily... this may also be the case for gallery, but it seemed that it had trouble if you move things around too much
  • Plug-in architecture; mentioned in point 1, it's important to set a low barrier for plugins.  While zenphoto doesn't have too many now, I inspected some of the existing ones and the structure and hooks seems to make sense to me without a lot of API spec reading.

All of this praise aside, I still found a few errors here and there, so this post is meant to record them both for others and myself, just in case I have to install from scratch in the future.

Fixing tab hiding error

The most aesthetically pleasing theme in the default set to me was 'stopdesign', so I set it as my default.  However, when hovering over different images (or even movies, which was more troublesome) the virtual tab to advance to the next or previous image was far too large.  In some cases, this prevented the shuttling of position in movies, in others, it was just weird because the image dimension was smaller than the hover-over hotspot.  These are some screenshots of firebug and what it looked like on a movie page.

Fortunately, it's a simple change documented in these steps...

  1. Find the file... zen/themes/stopdesign/image.php
  2. Find the line... <strong style="width:190px; height:300px;">
  3. Change it to... <strong style="width:190px; height:100px;">

Once you do this, just the asthetic location of the hover-over tab (or the height of the floating 'strong' DOM) style changes, so you run no chances of actually breaking code.

Preventing direct access of 'albums' directory

One design flaw (or perhaps hosting flaw) was that users could directly access  the photos in my library without going through the zenphoto interface.  In the end this may be desirable, but I have some intelligent and well-meaning friends that may opt to scrape my site for photos, which generally isn't what anyone wants.

Here, the change is made by creating an '.htaccess' file in the albums directory of your zenphoto installation.  I chose these file extensions because they were common extensions of my media, so you can add or delete extensions as you see fit.

<Files ~ "\.(avi|GIF|JPE?G|MPG|mpg|AVI|PNG|gif|jpe?g|png)$">
        Order Deny,Allow
        Deny from all
Options -Indexes

After adding the '.htaccess' file to your album directory, anyone who tries to directly scrape will get a 403 (permission denied) message, which is generally handled correctly by zenphoto's scripts in parent directories.

Generating thumbnails and flv videos

An appealing aspect of zenphoto is the ability to include FLV files in place and have them auto-indexed and show up in a browse mode just as regular photos.  However, to get a good thumbnail and FLV format data from different formats, you may have to transcode the original file.

First, a straight-forward command to generate FLV files in a fixed size and bitrate for zenphoto and the web.  The touch command will copy the timestamp from your movie to the generated FLV.  Although this may not be perfect, at least it will help zenphoto to better organize your new movie by date, which is the default mode.

nice ffmpeg -i $1 -s 320x240 -r 15 -b 250000 -ar 22050 -ab 48000 -y $1.flv
touch -r $1 $1.flv

Next, a quick command to also generate a JPG thumbnail from the start of the video.  Without this, your video will show up as a generic movie icon, which can make browsing them confusing.  Solution? Simply direct ffmpeg to generate a single frame from the top of the video.  Again, the second line grabs the timestamp from the original video.

nice ffmpeg -i $1 -vframes 1 -f image2 $1.jpg
touch -r $1 $1.jpg

Finding new files for indexing

Okay, so now you are happily generating videos with watermarks and thumbnails to browse.  If you're like me you're thinking, "how can I do this in a batch mode for a lot of videos that I just uploaded?".  Fortunately, that answer is pretty simple, too, and just uses a bunch of standard GNU tools to accomplish the task.

  • First, combine the four lines above into a single script file. In these examples we call it ''.
  • Next execute a find command that searches for all of the raw movie formats that you're interested in generating videos for.  The line below is how I do it on my host where the result is saved into a list of 'new' movies.
find -type f | grep -i -e 'mpg\|AVI' | grep -iv jpg  | grep -iv flv | sort >
  • Next, diff the new and old list of movies to find out what really needs to be processed by your ffmpeg script.
diff avilist.txt  | grep -e '^<' | sed -e 's/^< //g' | grep -v -e '\/extra\/' > avilist.todo.txt
  • Finally, execute your ffmpeg processing script for each line of the new file.  Step back, watch the magic and run at will for new video.
cat avilist.todo.txt | xargs -i ./ {}

Edit: While zenphoto will reorder your newly generated videos according there timestamp (the timestamp of the original movie file), there may be some differences between the file date and the EXIF date in your pictures.  For example, if you took a picture and captured movies at 10am and uploaded the data at 11am, don't be surprised if all of the movies get stamped with the 11am time.  It's an easy fix inside of the metadata editor of zenphoto, but it got me a couple of times.

Watermarking videos

Video watermarks can be applied when transcoding a movie with a nice hook provided for ffmpeg.  This documentation page describes the hook quite well and even gives a demonstration file.  Following this example and using the bump map generator in GIMP (as suggested), I was able to recreate the same effect very easily, as demonstrated by the image below.

From the example commands above, a quick modification to the transcode line shows how to use a watermark.

nice ffmpeg -i $1 -s 320x240 -r 15 -b 250000 -ar 22050 -ab 48000 -vhook '/usr/lib/vhook/ -f' -y $1.flv

These watermarks are stamped into the generated FLV with whatever image you provide on every frame.  Sure, this may be covering up the image a little bit and/or a little paranoid about people borrowing content without your permission, but it was a cool feature that you can turn on for your images so why not do it for videos as well?

Watermark example in bottom right

Watermark example in bottom right

Post a Comment

Your email is never published nor shared. Required fields are marked *