Use an old digital camera, gphoto2, and WordPress for automatic photo blogging

For the What We’re Eating feature of my blog, I needed a way to quickly take photos of our home-cooked meals. Using a dedicated camera and a simple script I wrote, the system prompts the user for a description of the meal, snaps the photo with the proper zoom and flash settings, rotates and resizes the photo, and uploades the content directly to the WordPress site so it’s immediately visible to the outside world… all with a single command! Read on to learn how to implement the system for your own automatic photo blogging!


Auto photo blogging with WordPress

The camera

The system uses a dedicated camera, permanently pointed at our dining area, connected to the computer by USB, and connected to a wall-socket for power. The camera must be supported by the gphoto2 software. I bought a used Canon Powershot G3 from a friend and it’s been perfect. An older, somewhat bulky camera, the G3 is less attractive than current models for day-to-day use but has great optics for high-quality shots.

gphoto2

gphoto2 is a command line application that allows you to control a USB-connected camera. Depending on the camera model, you can upload and download photos, set the picture quality, change the zoom and flash settings, and more.  On Debian or Debian-derived distributions (Ubuntu), the application is installed with the simple command “apt-get install gphoto2″.

Turn the camera on, connect it to your gnu/linux machine by USB, and run the following command to make sure the camera is recognized and can take pictures.

gphoto2 --list-config

This command will list the available control options for your camera and should output something like the following.


Detected a 'Canon:PowerShot G3 (normal mode)'.
/main/settings/ownername
/main/settings/capturesizeclass
/main/settings/iso
/main/settings/shutterspeed
/main/settings/zoom
/main/settings/aperture
/main/settings/exposurecompensation
/main/settings/imageformat
/main/settings/focusmode
/main/settings/flashmode
/main/settings/beep
/main/actions/syncdatetime
/main/status/model
/main/status/datetime
/main/status/firmwareversion
/main/status/driver
/main/Driver/list_all_files

Now test that the system can actually control the camera to take photos with the following commands.


cd /tmp/
gphoto2 --capture-image-and-download --filename test_photo.jpg

As the option names suggest, this will control the camera to take a photo and download the image immediately to the computer.

photoautoblog.sh

The photoautoblog command is a simple bash script that controls a digital camera to snap a photo of our dining table.  The photo is automatically manipulated and uploaded to my blog’s WordPress server, where it shows up in the header and is added to the list of our last 30 meals. The entire system is built on free software (and could use some improvement… please help!).

You can download the full script here:
photoautoblog.sh

Photo autoblogging in WordPress

The photos get uploaded to a directory on the server: /var/www/whatWereEating/ . From there, the images are utilized in two locations at my site. The most recent photo goes in the header of my blog, and images get added to the What We’re Eating post, which has photos of our last 30 meals.

Matt Gallizzi of NoTix Solutions helped me implement the auto-blogging stuff. He created a shortcode in /var/www/wp/wp-content/themes/default/functions.php as follows.

function what_we_are_eating() {
 #/var/www/whatWereEating/
 #http://onensemble.org/wp-content/whatWereEating/100711_121308_s.jpg
        exec("ls /var/www/whatWereEating/*_s* -r |head -n 30",$recent_images);
        $img_html="";
        $date="";
        date_default_timezone_set('America/Los_Angeles');
        echo '<div stye="float: left; clear: both;">';
        foreach($recent_images as $image) {
                $parts=explode("_",basename($image));
                if($parts[0] != $date) {
                #       $timestamp=date("l - F j, Y",filemtime($image));
                        $stat=stat($image);
                        $timestamp=date("l - F j, Y",$stat['mtime']);
                        $img_html.="<div style=\"padding-top: 15px; clear: both;
\">".$timestamp."</div>";
                }
                $info=file(str_replace("_s.jpg",".dat",$image));
                $img_html.='<div style="float: left; "><a style="float: right;" 
href="http://onensemble.org/wp-content/whatWereEating/'.basename(str_replace("_s
","_m",$image)).'" title="'.chop($info[0]).'"><img src="http://onensemble.org/wp
-content/whatWereEating/'.basename($image).'" alt="'.chop($info[0]).'"></a></div
>';
                $date = $parts[0];
        }
        echo '</div>';
        return "$img_html";
}

add_shortcode('what_we_are_eating','what_we_are_eating');

The actual blogpost then simply calls that shortcode to generate the list of images. I added a break at the bottom to keep the "Share This" logo separated. The whole post content looks like this:


(Intro text here)

[what_we_are_eating]
<br style="clear: both" /> <br />

Note: The layout of this post is somewhat broken in older versions of Internet Explorer. I don't have IE here to test it but I'll be happy to help improve the script if someone cares.

The relevant bit of code from my header (/var/www/wp/wp-content/themes/default/category-13.php) looks like this:

<div class="header-section">
<div class="header-title">What We're Eating</div>
<?
exec("ls /var/www/whatWereEating/*_s* -r |head -n 1",$recent_images);
$info=file(str_replace("_s.jpg",".dat",$recent_images[0]));
echo '<div style="margin-top: 10px"><a href="http://onensemble.org/what-were-eating/" title="'.chop($info[0]).'"><img src="http://onensemble.org/wp-content/whatWereEating/'.basename($recent_images[0]).'" alt="'.chop($info[0]).'"></a></div>';
?>
</div>

And finally, there are a few css definitions we created in /var/www/wp/wp-content/themes/default/style.css to define the layout of a few things:

.whatWereEatingText { 
text-align: right;
font-size: 12px !important;
margin: 0;
padding: 0;
}
#kris-blog-header { 
               height: 16em;
               min-width: 70em;
               }
.header-section { 
                  float: left;
                  width: 19%;
                  border-left: 1px none #999;
                  margin: 1em 0;
                  padding: 0 1em;
                  height: 90%;
                  }
.header-section + .header-section { 
                                    border-left: 1px solid #999;
                                    }
.header-title { 
                margin: 0 0 1em 0;
                }

Tags: , ,

Leave a Reply

On Ensemble is proudly powered by WordPress
Entries (RSS) and Comments (RSS).