1. 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.

    Conclusions

    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.

  2. 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.

  3. 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.

  4. 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.