Amelia’s new professional website is now live and eagerly awaiting public consumption. In September, she started pushing me for advice on how to buy a domain, get a host, design a website, and all the other fun things one does when creating a new site. What I found refreshing was how quickly she took to the process of designing the site. She coalesced in her mind its purpose, created a site map, and only then started on the design. And as for the design, she first did parts of it by hand and then built a layout in Word. I then converted it into HTML and CSS using my rusty design skills. The end result is a focused website that is rather straightforward and does exactly what she wishes.
The one thing I changed was the Portfolio. I knew we could design a better and easier to update Portfolio than what her original layout had planned. Thanks to my playing with jQuery this past month, I finally found a remarkably easy solution for creation a Portfolio using jQuery and Flickr’s Feed API. Honestly, at this point, I think anyone with a Flickr account could create their own online portfolio, similar to Amelia’s, within ten minutes. And, I thought I might share…
Tools
The first three can all be downloaded individually and combined, if you wish and have the skills. However, I added some functionality to Galleria (on the request of Ms. Lohrenz) and updated the Magpie library to use a new version of the Snoopy library, as its version was woefully out of date. Also, I thought you might wish to have a barebones demo using this technique. So, I created a download with all of the pieces combined and working…
‹ Download Portfolio Demo ›
Inside the index.php file are two variables. One is the $page_title and that value will be placed in the <title> tag, which is displayed at the very top of your browser’s window. The second, $set_url, is the URL to your Flickr feed. In Amelia’s case, what we did is create a new Set in Flickr for each section of her Portfolio. If you go to the Flickr page for a Set, you will in the bottom left corner, a ‘Feed’ link. That is the URL you will put in $set_url. Flickr has feeds for photostreams, collections, sets, and even tags so you really can pick and choose which images you show in your Portfolio.
Now, there is a small limitation with how many images that can be displayed. Flickr’s feeds only show the 20 most recent images uploaded. However, that actually worked in our favor as more than 18-20 images would be a detriment to the design. Sadly, there does not seem to be any publicly available around this limitation. I can easily imagine someone using another jQuery plugin to create a nice scrolling list of thumbnails for display.
Once you have set your $page_title and $set_url values, upload all of the files up to your host. Next, go into the ./script directory and give your ‘cache’ folder writable permissions (777, typically). Open your browser and look at the page. Here is my demo on reedmaniac.com.
The beautiful thing about this is that Amelia never has to learn any PHP or JS code. Heck, she never even has to modify a single file on her server to update the Porfolio. Instead, she uses her already existing Flickr account to add, edit, and remove images from Sets as she sees fit. And, if she ever wants to add a new section to her website’s Portfolio, she just creates a new Set and I copy a file and change two variables. Piece. Of. Cake.
That’s how it works. We’ll probably be tweaking her design off and on for the next century, but the demo I provided here uses only the basic CSS required for the demo. You should be able to play around with it and have loads of fun. Since there is some DOM manipulation of the HTML, the Safari ‘Inspect Element’ ability should come in handy with any CSS tweaks. If you want to learn a bit more of the technical aspects of what I did, continue reading. Everyone else, go play with the demo!
-----
The Porfolio, Various Technical Details
First off, I admit the CSS is a bit messy in the demo. Honestly, I copied it from the demos provided at the Galleria site and manipulated it thanks to ‘Inspect Element’ ability, which gave me a nice view of the DOM. Sure would be nice if we could have a View Source for the DOM at any given time, no? I expect I will clean it up once Amelia gives me the changes she wants done so that I can kill two birds with one stone.
Second, I hacked the Magpie library so that it looked for the Snoopy library in the same directory as the rest of the javascript. Just streamlined the directory structure a bit. Also, according to SourceForge the Magpie library has not been updated since 2005, so it has a tendency to output a few PHP errors when parsing feeds. Instead of fixing all of its problems, of which there is no shortage, I simply turned off error reporting while it was processing. Does not adversely affect results and saves me from hacking it any further. Finally, as for the Snoopy library included with the Magpie Library, it is also rather old and Derek Jones informed me of a recent security fix in it, so it was updated as well. I think that contributed the most to me creating the Demo for people to download and use. Leads credence to the idea of Magpie being resurrected or replaced in the PHP community.
Third, if you look at the top of the Galleria script, you will see the list of changes I made to it. Basically, Galleria allows you to add a caption to an image by putting it in the title="” attribute of the <img> tag. However, Flickr allows one to give an image both a title and a caption, both of which are included in its Feeds (the latter requiring a bit of processing to retrieve). Amelia wanted both to be included in her website’s Porfolio. What I did is added the longdesc="” attribute to the <img> tag to contain the Flickr caption while using the title="” attribute for the Flickr title. Then, in the Galleria plugin’s code, I had a <div with a class of ‘caption2’ added just after the original caption. I also modified the onImage trigger to include this second caption object, since I wanted to do a fade of the images and captions.
Looking in the PHP code in the portfolio_template.php file, you will notice that the Flickr caption was contained in the Atom feed’s ‘content’ element along with the image and a link to the Flickr page. Thankfully, Flickr puts those last two items in paragraph tags right at the beginning, so it was a simple grep match to remove them and get the caption, no matter its length and number of paragraphs. Also, since captions in Flickr contain HTML, I removed line breaks and did a bit of urlencoding to make it function correctly as an HTML attribute and validate as XHTML Strict. A bit messy, but it works and works well.
Finally, the Flickr feed only sends us the small image URL, which is oddly given the suffix of ‘_m’. For most Portfolios, this is too small of an image for detailed viewing. Magically, by removing that suffix, you get the medium size image. However, what you do not get is the width and height of this medium image. Thankfully, Flickr resizes medium images so that no side is longer than 500. With some quick math, you can determine the proportions of the small image and then what the medium image’s dimensions are. At most you will likely only be off by a pixel, I believe.
That’s mostly it. Just a bit of hacking, updating of outdated files, and massaging some data to fit our needs. In the future, it might be prudent to use the Flickr API with REST to get data as it has more parameters and would allow pagination among other features. Still, a good, simple first foray for people who want an easy to update Porfolio.