We sometimes create an intranet for our clients and, besides the company rolodex, having a nice way of visualizing photos from company events is an always returning requirement. Unfortunately, SharePoint Online still doesn't have a web part that visualizes this in a way my clients and I find acceptable. So I created my own, and open-source it.

I started with a very limited set of requirements:

  • The web part should be able to connect to any Document Library or Picture Library within the SharePoint site
  • It should visualize folders on top of the library, representing different albums (eg. folders Retreat 2019 and Team Building Diving to represent sets of related images)
  • It should allow for subfolders to be rendered as well, and provide a breadcrumb to navigate upwards
  • Underneath the folders it should render the actual images from that folder as thumbnails
  • Clicking on a thumbnail should open the full image in a Lightbox styled rendering, allowing navigation inside the album

All of the requirements are fulfilled in our solution using SharePoint Framework, PnPjs, @pnp/spfx-controls-react and react-lightgallery.

The result

The code and package

The code is open sourced and available on a GitHub repository and there is also a prebuilt package in the Releases section on GitHub so you can get started easily.

This code is provided as-is without warranty of any kind, either express or implied, including any implied warranties of fitness for a particular purpose, merchantability, or non-infringement.