Galsing Flickr

About

Galsing (short for 'Gallery Single') is a PHP script for creating single page photo archives (where 'single page' means that the script is a single file, not that all the photos are shown together on one page).

Galsing was created for http://tigger.richardwinskill.co.uk, which is no longer being updated since it has been superseded by the Photos section of richardwinskill.co.uk. It is based on Gehazi, a similar script created by Tim Packer and Thomas Thurman. Gehazi didn't support multiple pages; pages had to be done manually using distinct files. As my Tigger photos were rapidly increasing in number, I decided to create a Gehazi that would automatically condense a long list of photos into multiple pages. I called it "Galsing".

The first version added to 6 times 9 was Galsing's 4th incarnation - labelled as version Delta to keep in line with the other 6 times 9 projects. As the name suggests, it uses photos hosted by Flickr.

Galsing 1 was fairly limited in comparison to its successors; it was possible to change a few things, but it involved manually editing the code (albeit only slightly) and it didn't have the versitility of the later versions (it could only cope with one set of photos, for example).

Galsing 2 allowed multiple sets of photos and came with a detailed setup section to allow for easy manipulation of pretty much every aspect of the gallery. Both of the first two versions used local files with separate folders of thumbnails and full photos. Aside from using local files, the main drawback of these early versions was the fact that the title of the photo came from the filename, and the filenames of the photo and thumbnail had to be the same, so changing the title was a bit long-winded.

Galsing 3, also known as "Galsing Flickr", marked the first major leap since my initial transition from Gehazi to Galsing. Using the Flickr API allowed much greater flexibility in display optiions and a much easier job for the user; Flickr automatically created different sized images, and has a good interface for editing titles and descriptions (something that was a pain to do with Galsing 1 and 2).

Galsing 4, labelled here as version Delta, and all subsequent versions make much better use of Flickr's API than Galsing 3 did. Galsing 3 was created shortly after I discovered Flickr and its API and I didn't take the time to really explore the power of Flickr's system. Following my greater understanding of the available options in the Flickr API, Galsing 4 has many subtle improvements. The most notable and important is that it is much faster; Galsing 3 made a ridiculous number of calls to the Flickr API and page loads were painful. Galsing 4 does it properly.

Example

There are two examples of Galsing Flickr in action:

• The raw example includes only the HTML and CSS to display Galsing Flickr correctly and it uses the "Detail" photo view with a maximum of 20 photos per page.
• The styled example shows Galsing Flickr integrated with the layout of 6 times 9 and uses the "Square" photo view with a maximum of 48 photos per page.

Using

API Key

Before using Galsing Flickr you will need to apply for an API Key (an API Key is what will allow the script to communicate with Flickr).

Why do I need my own?

It's damage control. If someone really hammers the Flickr servers then the API Key they're using will be blocked. If everyone else is using this Key too, then they'll all be blocked as well. I doubled checked this with Flickr, and they came back with:

You'll definitely want your users to use their own API Key. If not, and the application is widely used, there is a good chance it will end up being disabled once the Key limits are hit. There are a couple of applications that have gone through this in the past.

Flickr Support, by email

How do I get one?

You can apply for an API Key by filling out Flickr's "Apply for your API Key" form.

Most of the form should be pretty straightforward. For "About the application", something along the lines of "I want to use Galsing Flickr from http://www.6times9.com/galsing/ on my website, and I have to apply for my own Key" should be fine.

Once you have the Key, you need to copy it to the $apikey=''; line near the top of galsingflickr.php (e.g. $apikey='jhvg76yc786yvcfyrftyg';).

Styling

A CSS file is included in the download section. Make sure this is included in the HEAD section of any page that uses Galsing Flickr.

<link rel="stylesheet" type="text/css" href="galsingflickr.css" />

The entire output from the script is placed within a DIV with the ID "galsingflickr". The stylesheet has been separated into Colours and Layout to try to aid any editing you require. If you want to change the number of columns of phototsets make sure you change both the percentage width in the CSS file and the column number in the setup section (see below) as appropriate.

Setup

Since the processing of the photos is the same in each case, the 'engine' is a single file that's referenced by each page that needs it. The referencing page is also where the options are set.

Once galsingflickr.php is uploaded to your server, implementing it should be as simple as adding the following (adjusted as appropriate) to each page that requires a gallery:

<?php

$userid='00000000@N00';
$niceuser='john_doe';
$perpage=50;
$layout="square";
$photosetcols=3;
$spacingtotal=22;

$presetphotosets=array(
    "Young Tigger" => "1337764",
    "Tigger" => "1317783",
    "Tigger Lite" => "72157594238328599",
);

include 'galsingflickr.php';

?>

Explanation

• $userid - Required - Your Flickr user ID. It must be the one with an @. If you can only remember your ID that doesn't have an @, then this tool may come in useful.
• $niceuser - Your Flickr ID that doesn't have an @ (assuming you've set one). If you omit this variable then all URLs generated by Galsing Flickr will use your normal Flickr ID.
• $perpage - The number of photos you want to display per page. If you omit it, I believe Flickr's default 500.
• $layout - Can be either "square" or "detail". Used to specify which display option you want for the photos (see the Example section above).
• $photosetcols - The number of columns you want on the Photoset list. The default is 3, and this must be in sync with the percentage width specified in the CSS (i.e. a 33% width in the CSS and a value of 3 for the columns, or a 50% width and 2 columns, etc.).
• $spacingtotal - The total number of pixels of padding (top & bottom), margin (top & bottom), and border (top & bottom) on "div.photoset div" (e.g. "padding: 5px, margin-bottom: 10px; border: 1px solid black;" has 5px padding-top + 5px padding-bottom + 10px margin-bottom + 1px border-top + 1px border bottom = 22). The default is 22. It is used by the JavaScript to adjust the heights of the boxes to compensate for the effects of the padding, margin, and border.
• $presetphotosets - By default Galsing Flickr will display every photoset for the user ID specified. Use this array if you only want to show a preset list. Mimic the format of the example setup section for any photosets you want to define. The first part - the word(s) - is a label that is purely for your benefit in later identifying the photoset, and the number is the ID of the photoset (which can be found in the URL of the photoset's page on Flickr).
• include 'galsingflickr.php'; - Required - This is the line that actually includes Galsing Flickr. Make sure you adjust the path to match the location of galsingflickr.php relative to the gallery page.

Important: If you do not require one or more of the options explained above on a particular page, make sure you omit them from the setup section (i.e. don't just leave them blank; actually remove them) or it may confuse Galsing Flickr.

Powered by Galsing Flickr

If you use Galsing Flickr, I'd be grateful if you could put this image in the root directory of your website (that's where the code looks):

Download

To download the Galsing Flickr script and the Galsing Flickr CSS just right-click and choose "Save As" (or the equivalent for your Operating System/Web Browser).

The current version is Echo (2008-03-21) - No changelog.

There's now an RSS feed for easy notification of the infrequent updates to all 6 times 9 projects.

Feedback

I'd like to hear what you have to say about this script; I've only been able to test it in IE, Firefox, and Opera in Windows - I have no idea if it'll work on a Mac, for example...

If you have any comments, compliments, or suggestions feel free to email me and let me know.

Valid XHTML - Valid CSS - © 2006 Richard Winskill - Design by Nocturnal Web Design