Angular image gallery

Responsive, fast and easy to use

Posted by Benjamin Brandmeier oidamo.de on January 08, 2019

This is a project I have started some time ago and I'm still maintaining it. The project consists of a responsive gallery, an image viewer and a script for image pre-processing.

This very first blog post should give a quick overview about the project. I'm planning on writing a series explaining the purpose and implementation of all the interesting features.

How to use

Before using the gallery, you have to process all of your images that will be part of your gallery with the convert script. The processed images will be stored to your applications assets or, if you wish, at a remote location. During runtime everything runs client-side and there is no separate server-side communication involved.

The latest step to step guide can be found at this Step-by-step tutorial.

What are the features?


Pre-processing

What are high-quality images to your users? Right, it depends...
The approach the gallery takes is generating multiple resolutions of a single image and serving the best version to your users, based on their current viewport. To determine the various levels I had a look at the most used resolutions across the web nowadays. The viewport and the corresponding images are determined during runtime.

During the pre-processing process, various metadata for each image is stored, including the order of how your images will appear. There are three different sorting options:

  • by file name
  • by original time taken (EXIF DateTimeOriginal)
  • by color

Gallery

Every single image row in the gallery has the same width, no matter if your images are very tall or flat. This works without your images being cropped and without changing the image ratio. Sounds fancy?

Basically the idea is, that each row has an individual height which defines the height for each image in the row and the entire row is scaled until the full width is reached. If you do it right the row's heights differ only a tiny bit.

Another gallery feature is asynchronuous rendering which loads the images only if visible inside the users viewport.


Viewer

The viewer takes care that an optimal image quality is served based on the users viewport. It supports keyboard shortcuts, basic animations and swiping on mobile devices.



Demo

A live demo can be viewed at https://oidamo.de/angular2-image-gallery