Stand-alone‎ > ‎

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, a gallery of photos I took of our now-late cat Tigger. 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 before I moved to Google Sites. 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 versatility 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 options and a much easier job for the user; Flickr automatically creates 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, and all subsequent versions, makes 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 frankly ridiculous number of calls to the Flickr API and page loads were painful. Galsing 4 does it properly. Well... at least more properly...

Example

Currently I have no live websites using Galsing to use as a demonstration. I'm hoping to get something working at some point.

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 double 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 https://sites.google.com/site/6x9dotcom/galsing-flickr on my website, and I have to apply for my own Key" will probably 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='abcdefgh12345';).

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 photosets, 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 is 500.
  • $layout - Can be either "square" or "detail". Used to specify which display option you want for the photos.
  • $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, 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):

Powered by Galsing Flickr

Feedback

I'd like to hear what you have to say about this or any other project on the site.

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

Download

Download the latest version using the link below.

Note that the first version uploaded here was last updated 2008-03-21. The date of any subsequent changes will be accurately reflected in the date shown in the table.

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

Download
Accompanying CSS  2k v. 4 31 Dec 2012, 02:31 Richard Winskill
ċ

Download
A PHP script for creating single page photo archives.  16k v. 5 23 Mar 2013, 21:52 Richard Winskill
Comments