Compatibility insights: Lightbox Studio x Squarespace universal filter
In the previous post, I examined the compatibility between Lightbox Studio and the Universal Filter plugin from Squarewebsites. However, there was an oversight. The plugins work well together only if the "All" option is enabled by default. Additionally, there's an issue with pagination where only a subset of gallery items is displayed at one time.
This post will explain the situation and address these issues.
The Problem
Users noticed the issue on this page. Everything looks fine on page load with the default filter “select”, but problems arise when switching to the "arizona" filter. The lightbox is messed up, and the default lightbox appears instead of the new Lightbox Studio. Below are some screenshots to compare, starting with the initial filter selection:
When switching to the "arizona" filter, the problem arises. The default lightbox appears where it should show 3/3 images with Lightbox Studio:
The Root Cause
When the Universal Filter is set to display all items by default, all items are available on the Squarespace website on page load. This allows Lightbox Studio to correctly bind to all of them. Since they are correctly bound, switching filters (which are subsets of the "All" filter) will result in all gallery items being correctly bound.
However, when the default filter is not set to "All," not all gallery items will be bound correctly, leading to the mismatch seen in the example. Both "select" and "arizona" are subsets of "All" items and do not share gallery items, resulting in the default lightbox opening.Solution
Initially, I considered using Squarewebsites Universal Filter hooks (e.g., triggering custom actions after the filter is initialized). However, it would be better to update Lightbox Studio to listen to gallery item DOM changes and act accordingly. This approach benefits all plugin users without requiring direct intervention to resolve conflicts.
Since I got the idea, the fix is straightforward. As shown in the screenshot below, the "arizona" filter now displays correctly in the lightbox:
arizonal filter correct lightbox
Some side notes
Universal Filter comes with numerous options and settings. Here are some tips to help you implement it quickly on your Squarespace website:
Assign filter criteria for Gallery items
The website in this post uses a Gallery section. Since there is no built-in tag and category taxonomy for this layout, you need to assign them manually via the description. For example, the snippet below assigns "arizona" and "select" to the item:
<span class="tags" hidden>arizona., select.<span>
In case you are wondering how HTML can be inserted in Gallery section items, check out this tutorials on to insert title AND description for Gallery section items
Add hidden tags to gallery
Show all items as default
To show all items as the "All" option, simply enable it in the customFilter config. Find the showAll: false setting and change it to true. This will result in the "All" option being displayed as shown below:
Filter with ALL option
Lightbox Captions on Squarespace Gallery Sections
Squarespace gallery sections don’t support lightbox captions by default, as seen in the screenshots above. Captions are only available in the main gallery. However, this is not an issue with Lightbox Studio, which supports lightbox captions for Squarespace gallery sections out of the box. If you prefer a lightbox captions-only mode, that's also doable with Lightbox Studio.
Conclusion
Addressing compatibility issues between Lightbox Studio and the Squarewebsites Universal Filter plugin ensures a seamless experience for users. By updating Lightbox Studio to listen for gallery item DOM changes, we can resolve conflicts without requiring direct intervention. My day-to-day job involves fixing these types of conflicts to provide you with a stable, fully supported plugin for your website, allowing you to focus on other aspects of your site with peace of mind.
