Marty Spellerberg

Hello! I posted previously about a simple jQuery slideshow I created for accessing sets on Flickr. To use it at work, where we’re running ModX CMS, I turned it into an easily-reusable “snippet.” You can see it in action here.

Here’s what you do:

1. Call jQuery in the head of your template. As of this writing I’m using 1.3;
2. Upload the Flickr API library to your server and call it something like “flickr_api.inc.php”. It is a very slightly modified version of Rasmus Lerdorf’s PHP5 Flickr_API;
3. Upload the jQuery slideshow to your server and call it something like “flickrslideshow.js”. An explination of the jQuery can be found in a previous post;
4. Create a new snippet called “flickr-slideshow”. The contents of that snippet is bellow;
5. And finally, call the snippet like so: [[flickr-slideshow? &photoset=`XXXXXXXXXXXXXXXXX`]], replacing, of course, the XXXs with the ID of the Flickr set.

The contents of the “flickr-slideshow” snippet:

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
79
80

<?php
 
// Get the photoset from the snippet call
$photoset = isset($photoset) ? $photoset : '';
 
// Your path to to the Flickr API library 
include_once("pathto/flickr_api.inc.php");
 
// Your API key	
$secrets = array('api_key'=>'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX','api_secret'=>'XXXXXXXXXXXXXXXX');
 
// Create an instance of the Flickr class, using your credentials
$flickr = new Flickr($secrets);
 
// Load the set we're looking for into an array
$photos = $flickr->photosetsGetPhotos($photoset);
 
// Start a counter
$counter = 1;
 
// Get the total number of photos in the set
$photocount = count($photos['photos']);
 
// A wrapper div, used by the jQuery
echo '<div class="flickrslideshow">';
 
// Now to loop through the photos in the set...
foreach($photos['photos'] as $photo) {
 
// Get the path to the image
$url = $flickr->getPhotoURL($photo,'');
 
// Get the image info
$info = $flickr->photosGetInfo($photo['id']);
 
// Another div for the jQuery
echo '<div>';
 
// Output the image tag, with the title as the alt
echo '<span class="image"><img src="'.$url.'" alt="'.$info['title'].'" /></span>';
 
echo '<p class="caption">';
 
// If the photo has a title, output that...
if ($info['title'] != ""){ echo '<strong>'.$info['title'].'.</strong> '; }
 
// and ditto for the descrition.
if ($info['description'] != ""){ echo ' '.$info['description'].' '; }
 
echo '</p>';
 
// Output the count
echo '<p class="controls">Image '.$counter.' of '.$photocount.' | ';
 
// Set up some numbers to use for the prev/next controls
$counterprev = $counter - 1;
$counternext = $counter + 1;
 
// Output the "previous" control
if ($counterprev > 0) { echo '<a href="#'.$counterprev.'" class="prev">Prev</a>'; }
 
// Output a separator, if needed
if ($counterprev > 0 && $counternext <= $photocount) { echo ' / '; }
 
// Output the "next" control
if ($counternext <= $photocount) { echo ' <a href="#'.$counternext.'" class="next">Next</a>'; }
 
echo '</p></div>';
 
// Iterate the counter
$counter++;
 
}
 
// Include the jQuery slideshow code (change to match the path on your server, of course)
echo '<script type="text/javascript" src="/pathto/flickrslideshow.js"></script>';
 
echo '</div>';
 
?>

This could be improved in a myriad of ways. For instance, the presentation layer could be abstracted out into ModX chunks and the jQuery could be made to insert the markup which is essentially redundant in the no-script view.

If you notice any errors please post in the comments. As always, I hope that seeing this helps you in your own coding!

Website, 2008–10

The Art Gallery of Ontario is one of North America’s premier art institutions. As a member of the in-house New Media team, I created a wholly redesigned website for the occasion of the Gallery’s 2008 reopening, which I continued to develop and maintain through 2010.

During this time I participated in the establishment of the Gallery’s social media presence, incorporating popular platforms into the site and internal workfl ows.

Collaboration with Andrea Kreuger.

www.ago.net

LANGUAGES
JavaScript, PHP, HTML, CSS

CMS
ModX, WordPress

Each year, The Grange Prize recognizes the work of Canadian and international contemporary photographers, awarding $50,000 CAD to a winner chosen through an online public vote from among two Canadian and two international artists. Exhibitions are held at the Art Gallery of Ontario and an international institution.

I developed the online voting mechanism and multi-lingual website for the 2009 prize. An explanation of the technological solution can be found on my blog.

See thegrangeprize.com

The Grange Prize Website (MODX Implementation). Design by Andrea Kreuger. Click to view

The Grange Prize is an annual contemporary photography prize. The winner is chosen through a people’s-choice vote conducted in-gallery and online. When the AGO took over the site this year, our goal was to create an easy to use and reasonably secure voting mechanism. The rules of the vote were simple — one vote per email address. This meant the main thing we needed to do was verify email addresses. We realized we already had the capability to do this, in the form of the double-opt-in mechanism of our list manager.

What is Double-opt-in? A user submits an address using an online form – that’s the first opt-in. Addresses are stored in the system and marked “unconfirmed.” Then the user confirms the action by clicking a link in an email – that’s the second opt-in. It is not until the verification link is clicked that it is marked as “active” or “confirmed.”

The choice being voted on – in our case Artists – were “segments” of the list. Segments are simply a second column of data, typically holding some sort of preference or demographic data.

So mainly we used the system as designed, simply changing the language presented to the user so that “subscribe” became “vote.” Easy!

Details, Details

There are many, many list management options out there. The ideas outlined above probably apply to any system. We happen to use a system called Cakemail, which has its own peculiarities.

In Cakemail, if a previously confirmed address is re-submitted it is marked as unconfirmed until the verification link is clicked. To ensure votes were not invalidated in this way we needed to check that an address had not already been confirmed.

Luckily, Cakemail provides a way to do this. If you pass an email address to a certian URL, it will return either a “1″ or a “0″ in response. So when the user submits their address we used this PHP class to get the response from that URL and from there it’s a simple ‘if/else” to either submit the address to the system or redirect to a ‘Sorry, you’ve already voted’ message.

One last thing to mention is the CAPTCHA, which is used to verify that the from is being submitted by a human being rather than an automated bot. For this we used eForm, which is part of the ModX content management system upon which the site was built.