Note: Updated December 7, 2010 for use of new theme….
Nothing like a little WordPress hacking to get back in action.
A few months ago I registered the domain barkingdog.me as a place intended to set up a photo gallery, but decided today to finally get around to hanging something for real there. My goals were to have a clean site with ginormous images, and also something that would be little fuss to add.
On my NMC work in creating the MIDEA site I had set up an account to have access to the Graph Paper Press themes — yes, these are paid for themes, but are very elegant and sophisticated. I did moderate hacking to the Modularity theme for the MIDEA site, but was liking their photo gallery themes, and landed on Widescreen Fullscreen.
With a few hours tweaking and adding one moderate hunk of code, I have what I aimed for at barkingdog.me:
Widescreen Theme version, not used anymore
Fullscreen Theme version, current
It’s totally unblog. There is no sense at all of “posts” or chronology. The front is a rotating slide show (they limit it to 5 images, I think I know how to expand, but that’s later). I’ve arranged them via a few categories. like People, Places, Things.
The newer Fullscreen creates thumbnails for the recent upload, newer ones are large icons across the top, plus 20 more following on the bottom. When you roll over an icon, it lightens up. Its all automatic, so as new photos are uploaded, they rotate in at the top. I set the theme options to NOT out sidebars on the pages, to the version I embed now is the full width (950 pixels wide).
But here is the key thing. Because of the way I do my photo workflow in Aperture, I only have to upload the image in the post, and I used some code to embed the meta data that comes out of Aperture export and WordPress drinks in on image upload.
As I edit my photos in Aperture, I enter titles and captions as these are used when the photos are exported to flickr (using the Connected Flow plugin). I do this in Aperture because it gets saved as meta data (which has saved me lots of re-do if the export fails for some reason).
I’ve noticed when I import these images into wordpress that the metadata from aperture is carried into WordPress
That means the Aperture metadata travels with the image, and also includes things like shutter speed and aperture of the photo. It would be nice to bring that into my site!
After a bit of googling I found some code used to add and display geocode data to an image uploaded to WordPress that gave me more than enough to do what I needed (with some modifications).
So what I did was to add this code to my functions.php template file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
function insert_exif($pid) { // insert EXIF data for first image uploaded to a given post $pid // modified from http://www.kristarella.com/2008/12/geo-exif-data-in-wordpress if (is_single() || is_attachment()) { // set up query to get the first attachment to a POST // yes, this assumes that there is one image per post, but thats what I designed! $args = array( 'post_type' => 'attachment', 'numberposts' => 1, 'post_status' => null, 'post_parent' => $pid ); $attachments = get_posts($args); // I really dont have to loop, but go ahead, its one loop foreach ($attachments AS $attachment) { // get the image id $imgid = $attachment->ID; // load metadata associated with image $imgmeta = wp_get_attachment_metadata( $imgid ); // use caption as body text if (!empty($imgmeta['image_meta']['aperture'])) echo '<p>' . nl2br($imgmeta['image_meta']['caption']) . '</p>'; // list for other meta data echo "<ul class='exif'>"; // camera type if (!empty($imgmeta['image_meta']['camera'])) echo "<li><strong>Camera:</strong> " . $imgmeta['image_meta']['camera']."</li>"; // aperture if (!empty($imgmeta['image_meta']['aperture'])) echo "<li><strong>Aperture:</strong> f/" . $imgmeta['image_meta']['aperture']."</li>"; // ISO if (!empty($imgmeta['image_meta']['iso'])) echo "<li><strong>ISO:</strong> " . $imgmeta['image_meta']['iso']."</li>"; // format shutter speed if (!empty($imgmeta['image_meta']['shutter_speed'])) { echo "<li><strong>Shutter Speed:</strong> "; if ((1 / $imgmeta['image_meta']['shutter_speed']) > 1) { echo "1/"; if ((number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1)) == 1.3 or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 1.5 or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 1.6 or number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1) == 2.5) { echo number_format((1 / $imgmeta['image_meta']['shutter_speed']), 1, '.', '') . " s</li>"; } else{ echo number_format((1 / $imgmeta['image_meta']['shutter_speed']), 0, '.', '') . " s</li>"; } } else{ echo $imgmeta['image_meta']['shutter_speed']." s</li>"; } } // focal length if (!empty($imgmeta['image_meta']['focal_length'])) echo "<li><strong>Focal Length:</strong> " . $imgmeta['image_meta']['focal_length']."mm</li>"; // license if (!empty($imgmeta['image_meta']['copyright'])) echo "<li><strong>Rights:</strong> " . $imgmeta['image_meta']['copyright']."</li>"; echo "</ul>"; } } } |
Essentially we pull the image id for the first attachment for a given post, then fetch its meta data, and walk through some steps to generate output. What I am doing is using all of the image meta data to compose the body of the post.
Then in my single.php template, I added somewhere below
|
1 |
<?php the_content(); ?> |
this one line to call my function
|
1 2 |
<!-- photo meta data --> <?php insert_exif(get_the_id()) ?>; |
And thus for this uploaded photo all I did was upload the media in WordPress, add some tags and categories, and publish. The results use the image meta data to add the bits below the photo:
Note: This is a screen shot from my first effort, for some reason I am no longer getting the rights meta-data, need to make sure I am including this in Aperture….
Another nice feature of this theme is that I can create a page (or post) to hold a gallery of images- like this one of Icelandic Horses. All I had to do was upload all the media to the page, and write my body text, and the published page is a new slide show. The new theme does not have this; I have not tweaked all I want to do with the categories and tags yet.
I’ll likely keep tweaking this, but as far as adding new photos to my site, it takes about 2 minutes. If I can figure out how to export more metadata fields from Aperture, you will see them here soon (apparently you cannot!)
I like this a lot, and glad you blogged it. As you know we have been playing with the daily shoot in my digital storytelling class, and after that assignment a number of students are dedicating their digital stories to photography. On top of that, they all have their own WP install on a CPanel, and we’ve lightly hacked some theme templates. So, this provides an awesome example of how they can create a project site for their photos using blog software, but no where a blog to be found.
Help me reintroduce theme hacking and templates, as well as frame the possibilities of subdomains additional add on domains, etc.
You rule dog, welcome back.