Photo Galleries

Act lets you easily create photo galleries in your own static pages by grabbing tagged photographs from Flickr.

Configure the tags

In your conference's act.ini configuration file, specify the tag or tags used by your conference.

  [flickr]
  tags = foo,bar,baz

Creating a gallery

In any template or static HTML page, use the flickr_get function to retrieve photographs. This function returns an array, each element is a hash that provides a set of URLs for each photograph.

  photo_page    this photo's Flickr web page
  owner_page    this photo owner's Flickr web page
  smallsquare   small square 75x75
  thumbnail     thumbnail, 100 on longest side
  small         small, 240 on longest side
  medium        medium, 500 on longest side

flickr_get returns a shuffled list of all photographs. An optional argument may be provided to limit the number of returned photographs. This examples displays 42 randomly selected photographs in "smallsquare" format, linking each picture to its Flickr web page.a

  [% WRAPPER ui title="Photos" %]
    
    [% photos = flickr_get(42); FOREACH p = photos %]
      <a href="[% p.photo_page %]"><img src="[% p.smallsquare %]" /></a>
    [% END %]
    
  [% END %]

Animation can be added using a bit of client-side JavaScript code. The following example builds on the previous one. Every 2 seconds, a random image is replaced by a different photograph from the pool returned by flickr_get.

  [% WRAPPER ui title="Photos" %]
    
    <script language="JavaScript">
      
      var photos = [
        [% photos = flickr_get(); FOREACH p = photos %]
          '[% p.smallsquare %]'[% ',' UNLESS loop.last %]
        [% END %]
      ];
      
      [% display = 42 %]
      
      function shuffle()
      {
        var i = Math.floor(Math.random() * [% display %]);
        var j = Math.floor(Math.random() * [% photos.size %]);
        document.getElementById('flickr_' + i).src = photos[j];
        setTimeout(shuffle, 1000);
      }
      
      setTimeout(shuffle, 2000);
      
    </script>
    
    [% FOREACH i = [ 1 .. display ] %]
      <img id="flickr_[% loop.index %]" src="[% photos.${loop.index}.smallsquare %]" /></a>
    [% END %]
    
  [% END %]