A new beginning - Refract Photography

A new beginning

Single SpiraeaClose-up of a single Spiraea shrub flower

It has been quite some time since something exciting, or rather anything happened here, on this website. Or at least, so it may have seemed. But behind the scenes, hard work has gone into a total redesign of the website. As some of the visitors of my old website might remember, it was primarily structured around albums. While this might seem a good idea, the structure of good old dead tree photo albums is actually not so suitable for web publication, as I found out the hard way. Even when disregarding the downsides in terms of defining a common theme for an album, and then determine which photos would be suitable to fit that theme, it is just a pain in the ass to first edit all photos, then write titles, descriptions and categories for all of them and only then publish the album as a whole. Simply put, it is just not rewarding and too time-consuming to make a single publication.

In contrast, the current website has totally abolished the concept of albums, and is instead structured around a timeline. Here, all content that is published is presented in descending chronological order. Because of this structure, it is possible to publish images continuously, without having to wait for the completion of an album. To bring some order to the likely ensuing chaos of an ever increasing number of photos in the timeline, categories and selections are introduced as an alternative method of structuring published photos. The main difference between the two is that categories are structured around what can be seen on a photo, while selections are structured around photography techniques, such as night photography and black-and-white photography. In addition, every image is assigned to one (and only one) category, while only some images are assigned to one or multiple selections.

On the technical side, parallax scrolling effects have been added to the top of each page, and the lightbox (slideshow) viewer has been changed from the Koken built-in one to BaguetteBox. While the parallax scrolling is purely a cosmetic change, changing the lightbox, besides being considerably more complex also has some more fundamental reasons behind it. First of all, the Koken default lightbox is not always capable of providing a slideshow of just the content that is in view. When viewing a specific category or selection, it has the very annoying habit of going through all images on the website, instead of just the ones belonging to that specific category/selection. A side-effect of replacing the built-in lightbox has also been a very noticable increase in speed when both opening the lightbox and navigating through photos.

By implementing an external lightbox, an additional problem with Koken presented itself. Because the grid system used for presenting all the photos has a weird way of ordering them internally, with as result that any “normal” lightbox is not able to show the photos in the order in which they are presented on the webpage. So, a new grid system has been designed to keep the internal and visible order identical. The most notable change to achieve this is the change in grid orientation from columns to rows. By doing so, the Koken built-in grid system has been entirely bypassed, and, for the tech-savvy nerds among you, has been rebased entirely in CSS flexbox. The only thing that is not done in CSS, is assigning random widths to individual photos. Random widths are used in order to add some variability to the grid, instead of having all images lined out in exactly the same way. But enough about the technical details, it suffices to say it was a hell of a lot of work, but that is what you get if you want everything to look and work exactly the way you thought it out to be.

Most importantly, by switching to a timeline-based structure, it has become easier to update the website incrementally, and updates will be posted at least once a week. Also, if you have any comments or remarks on the photos or the (functioning of) the website, please do not hesitate to contact me. I will then get in touch as soon as possible.