I realize that I’ve not been able to blog for the longest time. I really wish I could go back in time to the days when life wasn’t so goddamn busy.

But I guess it’s neither good nor bad, as the times I do have some free time – it’s to do other fun stuff that doesn’t necessitate being in front of the computer. (or because I’ve got nothing else to do)

So here I am posting again. For now, I won’t discuss some experience (which I may get to eventually as a lot of those have happened since I last posted). What I’m going to talk about is the modifications I’ve made to nargalzius.com’s photo gallery.# Starting Anew

For the longest time, I’ve been using [the now defunct] Lumis Gallery – and have discussed extensively the benefits of piggybacking a personal gallery through Flickr’s API.

Unfortunately, the old engine has been “sick” for a long time – and the proverbial straw that broke the camel’s back was when it stopped playing nice with Facebook’s URL scraper. ¹ You know, the FB feature that generates proper titles, descriptions and thumbnails on your timeline when it [Facebook] detects a url in your post That, and Flickr itself had made major changes in the “value assignments” of their photo data – so the old system was starting to display the wrong photo sizes, etc.

So a few days ago, I decided to have a sit-down, scrap the “Lumis engine”, and re-write the gallery from the ground up. This decision has been put off as far as I can remember for various reasons – but mainly because the Lumis engine had supported displaying Flickr notes. But I figured that I was going to have to “fix” something anyways – might as well go the whole 9 yards.

Gallery v2

The “transition” was a more than a success. I was able to add so much more functionality (at least for my uses) to the gallery – not to mention I think it’s much more “usable” now.

Here’s a quick rundown of the fixes/changes/improvements:

1. Better implementation of notes
2. All-sizes page
3. Better EXIF detection
4. Quicker response ² Lumis had a much more complex implementation (tons of features that I didn’t really use) – so it was a bit sluggish.
5. Proper OpenGraph behavior ³ This is what makes it play nice with Facebook

Take for example this sample page (don’t worry, it’ll open in a new tab/window) and compare it to the old implementation

I chose that sample page because it’s one of the pictures that’s got the whole shebang of data displayed: notes, comment(s), EXIF information – so it should give you an idea on what the general layout looks like.

Improving Notes

While Lumis did support notes, it had a lousy implementation of it. One weakness it had was you couldn’t click on a hyperlink that was in a note – because you’d be navigating away from the trigger and into the actual note <div> – hence “closing” the note before you get a chance to click on anything.

At first I fixed this by putting a 2 second time delay before any notes close – but that was really a hack and it felt like one ⁴ Notes would just overlap each other if you brush your mouse across all the triggers

To solve it once and for all, I chose a different approach: I decided it was better to display the actual note content below the photo – and when you rolled over said note(s) – a box will appear on the photo showing where that note was assigned. Sorta like mousing over a tagged name in Facebook.

This implementation had an added benefit that anyone visiting a photo with notes would immediately realize that the photo had extra information worth checking out. And it avoided redundancies when you try to identify things. Notice that in that very sample page mentioned earlier, I have a general listing of the objects in the description box as well as the notes. That’s because this picture was “tagged” a while back – where notes were hidden until mouseovered – so I needed to put a proper description for those not savvy enough to realize that the picture had contained notes. Moving forward, I obviously don’t have to do that anymore – I could just have a general description for the description box and have all the details in the notes.

Sizes page

If you’re wondering what that ☰ icon does, it sends you to a page where you have easy access to all the sizes.

This page was built out of necessity. I like to have easy access to the different sizes of a photo – and I was always annoyed at how many “steps” it takes to get a proper URL from Flickr.

With this page, get a quick glance of what picture I’m looking at (small thumbnail) then in case I haven’t quite decided what size I need to use – I have an easy way to immediately view each size through a lightbox.

Once I’ve decided on a size I fancy using, I just hover either on the static URL or html code snippet (code is catered to my blog) and it auto highlights – all I have to do then is ctrl-c and I’ve got what I need. ⁵ There’s a way to do a copy clipboard on click – but that requires Flash – which I’m trying to avoid

I also included some notes metadata for good measure – just for kicks.

Conclusion

All in all, I feel good how everything turned out. I’ve yet to see if there’s a better implementation I can do for the notes – since it can be quite a problem if you have a lot of notes (that you have to scroll down far enough – beyond view of the picture) but for now, this seems to be working well.