1. Introducing FlickrShow

    February 28, 2006

    My previous attempt at gallery software was very popular and I still get requests for the original release even though it hasn't been updated since it was released. It wasn't, however, the solution I really wanted when I set out to make a Flickr driven slide show. My inspiration was and still is Slideshow Pro which I love for it's ease of use and the way you can just drop it into a page. I wanted a Javascript solution that would be as easy to use and provide a similar service.

    The Implementation

    The result of my work is a centrally hosted slideshow that retrieves a photo-set from Flickr and displays the images in a horizontal slideshow format. It can be dropped into a page with just a line or two of script, can fit into any shape HTML DIV and is completely skinable so users can link to their own style sheets if they dislike green. It is encapsulated as a Javascript object using a stripped down version of the excellent prototype library which should reduce any problems with other scripts on the page and ensure it is as compatible and extendable as possible.

    The Challenges

    The biggest hurdle I encountered while creating a Javascript based solution was the inability of AJAX to make queries across domains, (a security feature that does make sense but is very frustrating). To overcome this problem I developed an interesting method of loading subsequent Javascript files using a combination of PHP and Javascript - the FlickrShow script writes new links to external Javascript files into the HEAD with query strings appended containing photo-set requests. Flickarray then retrieves the information from Flickr before sending a customised list of Javascript method calls back to the browser.

    Other problems were more run-of-the mill. Getting the Javascript ‘widget' to display properly across browsers is still an issue, (the IE 6 factor) and there is some inflexibility in the script which means you can currently only call one Flickrshow per page.


    Apart from solving the issues mentioned above, I want to add a play/pause function to remove the need for constant clicking. I also want to retrieve more information on the current photograph, (tags, descriptions and notes) but there are issues with loading times at the moment.

    If you want to have a play I've set up a mini site at Flickrshow.com which is running a demo complete with some stunning photography courtesy of Limonada. There is also a form to help generate the code required to install Flickrshow on your website.

  2. The dangers of customisation

    February 10, 2006

    In the past few years emerging techniques have allowed web site creators to customise their user's browsing environment to an increasing extent. Cascading style-sheets have allowed authors to modify form elements and scroll-bars to more closely match the aesthetics of their sites, javascript can be used to alter window size and shape and the behaviour of toolbars, browser buttons and mouse actions.

    This amount of control is embraced by traditional designers who enjoy maintaining strict control over every facet of their work, and who in the past have struggled with the unpredictable nature of the Internet as a medium of design, but many web developers are wary of the damage this customisation could be doing for the user experience and the effect it could have on how web sites are currently being used. Is there a point at which you can ‘design’ and control too much of the users browsing environment?

    Before the growth of the Internet, users would generally only be exposed to user interface elements that followed their platform developer's Human Interface Guidelines. These guidelines regulate the behaviour of widgets, buttons, mouse clicks and other interactive elements to achieve a level of consistency across applications, allowing a user to become familiar and efficient when using their computer.

    With the growth in usage of the Internet, and web sites that do not follow such specific guidelines, it is important to achieve as much consistency with a users native platform as possible, so that familiar interfaces are present where possible, especially for the more important tasks such as inputting data and navigating information. While it is always important to create a tight and integrated visual style when designing for the web, (or any interactive medium), the demands of the user that the interaction can occur easily and efficiently are equally important. With regards to specific elements or behaviour on the web, the user will have more experience with the elements and behaviour of their own operating system than with your site specific customised controls and mouse actions. If you want them to interact with your site more efficiently, it may be wise to let them use what they know.

  3. Updates to FlickArray

    January 3, 2006

    This version, (and in fact FlickArray as a whole), has been discontinued in favour of the Flickr library written for CodeIgniter, discussed in more detail in this article.

    While building flickrShow I also made updates to the flickArray class. I added support for photosets and have updated method and variable names to make them more readable and logical. I am in the process of rebuilding it in PHP 5 to make use of the new XML and OOP functionality, which should speed it up somewhat and allow it to be extended in a logical fashion. Download flickArray 0.2.

  4. Beseku Gallery 0.1

    November 17, 2005

    A few weeks ago I (tentatively) released flickArray, a simple PHP class for retrieving image information from Flickr. While I love the idea of Flickr, I wanted to improve on the way the images were displayed on my site - this was the catalyst for creating both the flickArray class and a new user interface.

    I've been experimenting with using javascript to add motion to a static XHTML interface for Cimex and the new gallery interface is an extension to that. The new gallery software consists of two parts; a back end - consisting of an updated and extended version of the original flickArray class together with a few wrapping PHP pages, and a front end ‘theme’ which uses XHTML/CSS to present the images and (if available) Javascript to enhance the interface and request additional images from Flickr without reloading the page or altering the documents semantic structure.

    The Back End

    While the original flickArray class contained a number of useful functions, I needed to add to it in order to achieve some of the results I wanted. These changes mainly involved modifying the existing methods to retrieve additional data. I also created ‘raw’ versions of all of the retrieval methods which return the information in pure XML form, a requirement for accessing the information through Flickr.

    To make the retrieved information more usable, I also extended the flickArray class to add methods that returned the information in XHTML structures, (mainly lists) which can be accessed directly from a PHP/XHTML page.

    The Front End

    The interface was initially designed using XHTML/CSS to create a semantically structured page for displaying images. I loosely based the layout on Todd Dominey’s excellent Slideshow Pro, which I feel is a brilliantly designed interface for viewing large amounts of images. Client side scripting is then used to alter the initial page to allow more images to be viewed without reloading the page. It is important to build web applications that can be used with or without Javascript, and so I wanted the scripting to enhance the gallery rather than comprise it.

    Script executed on page load determines the number of images to be displayed counting through the image links in the toolbar, and creates additional nodes in the ‘images’ definition list for each one. This method means that the page loaded initially doesn't contain any superfluous or empty elements - the javascript adds them in only if the script is executed.

    Once the elements have been generated and positioned, an onClick event is attached to each image link that will shift the relevant image into view and execute an AJAX request to retrieve the image, image title and image description from Flickr via the flickArray class.


    I have been concerned over the use of AJAX in recent months, as I felt that many people would implement it because they could, rather than for a specific and beneficial reason. I initially did not intend to use AJAX on this project, but chose it because of the server requests it would save when used. Instead of reloading the page and thus rebuilding the flickArray object, only a single request is made to the server instead of three or four when a new image is selected. If you try using the system without javascript, it becomes much more tiresome to use because of the loading times involved.

    The software still needs some improvements - I would like to enhance the interface further and the previous/next buttons are conspicuous by their absence. I also need to address how the system displays larger numbers of pictures, as currently the list of links simply wraps and looks confusing. Browser compatibility wise, there are some slight bugs in Opera that result in lost image descriptions.

    Release 0.1

    A number of people have expressed interest in the software to display images on their own sites. You can download the entire gallery software under the Creative Commons Attribution Non-Commercial licence. If you are using it, please link to this article so other people can get the software too. I would also like to hear of any improvements so they can be added to the main code base. Download Beseku gallery v0.1.

  5. FlickArray - Accessing Flickr With PHP

    October 27, 2005

    This version, (and in fact FlickArray as a whole), has been discontinued in favour of the Flickr library written for CodeIgniter, discussed in more detail in this article.

    Astute readers may have noticed the work going on at gallery.beseku.com. So far, these modifications are related to the user interface. I've been doing a lot of Javascript/Ajax work at Cimex recently and the by-product has been a number of nice libraries that I want to make use of. I have also decided to plug the the whole thing into Flickr and although its not finished yet, I have finished work on a PHP class to query the Flickr API.

    The class is written in PHP 4.3 and uses REST to access the API. It is the first notable piece of object oriented programming I have done in PHP, (mostly spurred on by Nick and his comments on my poor procedural coding and use of global variables). It is written with my gallery software in mind, and so will most likely be missing features simply because they didn't have a place in the envisioned end product.

    The class contains four externally accessible methods which you can use to retrieve your Flickr photograph information. These are ‘fa_GetUserDetails', 'fa_GetTags', 'fa_GetAllImages’ and 'fa_GetImageDetails'. Each of these methods returns a formatted array containing the information sent back by Flickr.

    Get User Details

    This method retrieves extended user details for the user specified in the object declaration. You can call it using $array = ($fa->fa_GetUserDetails());, and it returns an array containing the following values:

    [real name] => Ben Sekulowicz
    [location] => London, UK
    [date] => 2002-01-01 00:00:00</code></li>\n</ol>

    Get Tags

    This method retrieves all of the tags that the specified user has created. You can call it using the following code:

    $array = ($fa->fa_GetTags());

    It returns an array containing the following values:

    [0] => 2004
    [1] => boston
    [2] => chicago

    Get All Images

    This method retrieves all of the images with the supplied tag (singular at the moment).

    $array = ($fa->fa_GetAllImages("boston"));

    It returns an array containing the following values:

    Array (
      [0] => Array (
        [id] => 6602973
        [url] => http://photos8.flickr.com/6602973_dd58a6e3a5
        [permission] => 1
        [title] => Harvard across the river
      [1] => Array (
        [id] => 6602972
        [url] => http://photos8.flickr.com/6602972_7050a4ce98
        [permission] => 1
        [title] => Cheers

    This method gets enough information from Flickr to display all images and their titles. The URL is built up from the image's server number, ID and ‘secret’ number and is supplied missing a file extension so you can also append a variable to return the image in a number of sizes.

    Get Image

    This method retrieves extended information for the image with the specified ID.

    $array = ($fa->fa_GetImage("6602973"));

    It returns an array containing the following values:

    [author] => Ben Sekulowicz
    [date] => 2003-08-05 22:04:47
    [comments] => 0
    [tags] => usa boston 2004

    I am in the middle of writing some wrapper functions that will transform the output to semantic XHTML, but these will most likely be specific to my gallery software. I also plan to add support for multiple tag searching and displaying comments, but at the moment the class is limited to what I need. It is available here and is free to use and modify by all who want it.

  6. Hacking Your CSS

    February 22, 2005

    I know I have made my feelings about browser hacking quite clear, but I do have to use workarounds on client facing sites. Organising your hacks or workarounds so they make sense is a tough task, and I thought I would share how I order my hacks for ease of use. I prefer the route of seperating each browser to be hacked into it's own stylesheet, because then you can order them so each rule is applied in the same order, which is far easier to read and work with.

    I start with a root stylesheet imported so only version 4+ browsers can use it. This file itself imports a CSS file for Windows IE browsers and a CSS file for Macintosh IE, plus the generic styles that all good browsers can use. This method is the same as that used by John Serris at Phono Phunk, (nice site as well), and uses various filters to only show styles to the different families.

    /* Actual styles for nice browsers */
    @import "layout.css";
    @import "text.css";
    /* Import list IE Win family */
    /*\*/ @import "hacks-ie-win.css"; /**/
    /* Import styles for IE Mac */
    /*\*//*/ @import "hacks-ie-mac.css"; /**/

    For IE on OS X, this is the end of it, and the rules in this style sheet should be seen by no other browsers. For IE on Windows, I then import three style sheets for IE 5, 5.5 and 6 respectively using the hacks-ie-win.css file. These CSS files will also be seen by some good browsers, so the rules they contain have to use the * html hack to apply them to IE only. The method used to import the IE 6 sheet would also show it to IE on OS X, but that browser won't see this page because it won't see the hacks-ie-win.css file.

    /* Import only for IE 6 */
    @import "null?"\{";
    @import "win/ie-6.css";
    @import "null?"\}";
    /* Import only for IE 55 */
    @media tty {
    i{content:"";/*" "*/}}@m;
    @import 'win/ie-55.css'; /*";}
    }/* */
    /* Import only for IE 5 */
    @media tty {
    i{content:"";/*" "*/}};
    @import 'win/ie-5.css'; {;}/*";}
    }/* */

    Thats a total of six files and a sub-folder, which is a lot of extra weight, but in past projects I have hacked out about 50% of the original rules for poor browsers, and this saves a lot of confusion when working on a large site. Just as a disclaimer, this post doesn't at all change my stance on using hacks. It is possible to design sites that don't require hacks on the majority of platforms, (most of my designs are made to work on IE6 as well as modern browsers with no workarounds), but occasionally you do need to, and this is my way of doing so.

  7. Have You Seen This Site In IE 5?

    January 26, 2005

    I make my living writing clean, accessible and semantic mark-up, (and making good cups of tea), and I designed this site to reflect these skills. A lot of time went into making this design fit into a web browser in a satisfactory way. With that in mind, I am not going to alter the clean code to accomodate a browser that through three iterations still can't get the XHTML specification right.

    This site doesn't feature any hacks or compromises for Internet Explorer or any other browser - that means if you look at it in IE 5.01 the content is in a narrow strip down the left hand side. If you look at it in IE 5.5 or 6, the form-buttons are offset by 10 pixels. If you look at it it any flavour of Internet Explorer, you probably won't get to enjoy the PNG images used in all of their glory and the shorter pages won't be the required min-height - tough luck.

    If this was a commercial site, this may not be the case - people still use IE, (about 78% at the last count) and people equals customers equals revenue. But this isn't a commercial site, and with the target audience being what it is, if you are visiting this site using IE you should know better. Get a better browser. In fact, get a better computer.