Flickr photo albums on ProcessWire

A tutorial how to set up Flickr photo galleries on ProcessWire. I modified Sergio's photo downloading script and made Photobox effect for galleries.

Some of our clients have been using two Flickr modules on Drupal to get their photos from Flickr to the website, but finally we decided to start using ProcessWire to one of them. Flickr was important to them, so I had to figure out how to make those photo galleries on ProcessWire.

Luckily Sérgio from ProcessWire forum had made a script that, given an album ID, download its data using cURL and save the photos to a temp dir. After that, add them to a new page. But I didn't want to download photos to our server, I just wanted to fetch all photo urls. So I modified his code to suit my needs.

First, you need to download Sérgio's script from GitHub. You need to add lib folder somewhere where ProcessWire's template can access it. Those files does not need to be public. Then make a new template for photo galleries and make template file for it.

I made a new template 'kuvat' (means photos) with fields for Flickr album id and image field for listing and the meta/OG tags. Only bad thing is that user have to add each gallery separately. But script works pretty well and galleries urls are way better than what we had on Drupal.

If you want to use a Photobox effect for galleries instead of Lightbox, use the same photo url for a link and thumbnail. If using Lightbox, you can use smaller thumbnails for faster loading.

Add following PHP code to the new template file.

<?php
include "../lib/curl.class.php";
include "../lib/flickr_album_utils.php";
$album = fa_get_album($page->flickrid);
$images = array();
foreach($album["all_images"] as $f) {
$photo = 'https://farm'.$f["farm"].'.staticflickr.com/'.$f["server"].'/'.$f["id"].'_'.$f["secret"].'_b.jpg';
$thumb = 'https://farm'.$f["farm"].'.staticflickr.com/'.$f["server"].'/'.$f["id"].'_'.$f["secret"].'_q.jpg';
echo "<a href='$photo'><?img src='$thumb' alt=''/>

Remember to change paths for lib files. Next edit flickr_album_utils.php and put your Flickr's secret key to its place.

You should now see photos from the album you chose. However, loading all photos from external server on every page load is not the best idea.

Flickr photo sizes

  • s: 75 x 75
  • q: 150 x 150
  • t: 100 x 75
  • m: 240 x 180
  • n: 320 x 320
  • z: 640 x 640
  • c: 800 x 600
  • b: 1024 x 768
  • o: 2400 x 1800

References