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.