Author: Dhia Shakiry

Posted on

Visualising the global WPY image collection – A 3D web experiment

http://static.nhm.ac.uk/wpy-globe-experiment/globe?tags= (NHM VPN required)

During lock down, I worked on a personal side project to progress my knowledge in web-based 3D interactive visualisations. I’d always been inspired by the global reach of the WPY images and the feelings they invoke when considering each image’s precious, far-flung environment and wanted to create something that helped capture that. I’d seen several impressive 3D globe and collection visualisations (e.g. https://artsexperiments.withgoogle.com/tsnemap/) and wanted to investigate how they implemented acceptable performance (load times and frame rate) as an online interactive collection viewer running on a range of devices, knowing enough about the web and 3D to understand the specialist approaches required.

Continue reading “Visualising the global WPY image collection – A 3D web experiment”
Posted on

Recreating Wildlife Photographer of the Year online – part 3 – Headless content management

Introduction

The final part of our series of WPY microsite technical posts, this will cover the implementation of the Digital Media and TS development teams’ first use of AEM Content Services  – functionality that integrates our current traditional CMS (Adobe AEM) with decoupled front-end JavaScript applications like this WPY React/NextJS application. This is a more modern web application architecture which aims to separate web page presentation (the ‘head’) from the underlying content stored in a CMS. 

The rise of JavaScript frameworks to develop decoupled web applications (often called the ‘Jamstack’ https://jamstack.org/what-is-jamstack/) is an example of a common engineering strategy to separate increasingly complex software systems into more manageable components and services (areas of expertise).

Continue reading “Recreating Wildlife Photographer of the Year online – part 3 – Headless content management”
Posted on

Recreating Wildlife Photographer of the Year online – part 2 – key site features

With the platform and CSS approach covered in Part 1 (Link), I’ll go into detail about some of the key technical features and functionality we built out for the site (www.nhm.ac.uk/wpy). We’ll cover the core image gallery solution with it’s API filtering and Flickr style image layout. Then jump into the lazy loading and next gen image format topics, before finally covering the page routing architecture of this API-driven site.

Continue reading “Recreating Wildlife Photographer of the Year online – part 2 – key site features”
Posted on

Recreating Wildlife Photographer of the Year online – part 1 – Introduction and technical approach

https://www.nhm.ac.uk/wpy

Introduction

I’ve been involved with the Wildlife Photographer of the Year brand for as long as I’ve been at the Natural History Museum, which let’s just say is a long time. I’m still very proud and privileged to work on such important and inspirational content.

This series of posts is about the recent re-platform of our ageing WPY microsite. I’ll start by setting the scene for how the project came about and then dive into some of the technical decisions. Later on I’ll talk about some of the site’s key features and what we’ve learnt with the tech and working towards a more modern API-driven web architecture. It’s been great having something so rewarding to work and focus on during these strange and difficult times in lock-down. 

Continue reading “Recreating Wildlife Photographer of the Year online – part 1 – Introduction and technical approach”
Posted on

Trying something new – building the Life in the Dark interactive splash | Digital Media at the NHM

http://www.nhm.ac.uk/visit/exhibitions/life-in-the-dark.html

As part of the museum’s Life in the Dark exhibition digital content offer, we decided to try something new for our exhibition landing page to help promote interest and engagement.  We ended up using a new mix of front end technologies to build it, so here’s a (long) technical walk through of the various challenges and solutions we encountered.

Continue reading “Trying something new – building the Life in the Dark interactive splash | Digital Media at the NHM”