GHL released a photo gallery block in their builder in late October 2024. It’s easiest to use theirs unless you need something my gallery offers that theirs does not.
I built a single property real estate listing website–where the photo gallery is the primary feature–and needed an appealing, smooth, cross-browser image gallery.
After many hours of research and testing, I finally got an elegant solution I’m very happy with but definitely wish it wasn’t so much effort to accomplish.
I’m sharing what worked for me because it’s really the only GHL solution other than embedding from an external source, such as Elfsight, SmugMug, or Flickr.
Make sure you’re on the Media Storage’s List View, then copy my code into the browser console to get all of the uploaded Media File IDs.
The console script only gets images (JPEG, JPG, PNG, BMP, or GIF) so you won’t accidentally get Media File IDs for videos or PDFs.
The List View currently only displays 10 files at a time so you’ll need to go to each next page and run the code in the console again. Just paste them all into a text editor if needed.
Add the header and body code to your Website’s or Funnel’s Settings
Add a Code Editor element to your webpage and paste my code.
Then edit my pasted code to input your Media File IDs.
Save and test and you should be done! :)
GHL’s Image Slider element didn’t satisfy me
After testing HighLevel’s built-in “Image Slider” element, I found it lacking in multiple ways for my use case:
cumbersome to add images in bulk, having to select them one-by-one
limited to 15 slides, but I need to present 50+ images
due to the 15 image limitation, auto-play causes user disorientation when more than one Image Slider element is on the page (e.g. one gallery for Exterior, another gallery for Bedrooms, another gallery for Kitchen, etc.)–and auto-play cannot be disabled
no advanced functionality like viewing larger in a lightbox, zooming in, full screen viewer, or thumbnails
Challenges custom coding in GHL’s websites
HighLevel’s website builder uses Nuxt/VueJS so it’s not just outputting static HTML from GHL’s drag-and-drop builder–including whatever you put in the Code Editor element. This means copying and pasting code you find online is unlikely to work because you first need to wait for Nuxt to render the page itself via JavaScript, again instead of raw HTML output.
My Requirements
If I’m going through all this effort, I’m going to get exactly what I want:
history of being regularly maintained
reasonably popular on CDNs like jsDelivr, since that makes it more likely to be well-maintained long-term
no known vulnerabilities
looks good out of the box
cross-browser: mobile and desktop versions of Chrome, Firefox, Safari
feature-rich, because I don’t want to go through all this effort again if next time I need a little feature tweak
unbranded: no Google Photos, Flickr, or other logo in the way of displaying my real estate pictures in the best possible way
free, otherwise I’d save myself the headache and buy Elfsight (my referral link) or SmugMug, plus then I couldn’t share my solution to as many people
not limited to number of pageviews, which is why I did not go with Elfsight
no risking my accounts: embedding from Dropbox or Google Drive can risk your accounts being flagged as using them in an unapproved way–you never know if your website will go viral
keyboard controls like left/right arrows and Esc key
lightweight and performant, not loading all 50+ images upon initial page load
ideally having automatic thumbnails
Testing different lightbox and slider libraries
If GHL’s builder was basically a static site generator (i.e. not using Nuxt or similar), it’d be easy to drop-in almost any image gallery library. I went through several iterations of my custom code (since each gallery requires different markup) and had to learn the hard way that many didn’t work within GHL. Some even worked fine in a static HTML site I tested and then in GHL the library must have just been incompatible.
I initially searched for a slider (also called a carousel or slideshow) but realized I was actually wanting a lightbox. Although some sliders can effectively act as a lightbox, I wanted to stay away from overkill options since I knew I wanted to focus on displaying images.
Another consideration is how current the image gallery script is. Browsers are always changing and libraries that get abandoned are subject to not working across all browsers or, worse, falling victim to a code vulnerability.
I found Fancybox free and feature-rich, it didn’t play nice with GHL, possibly because it required jQuery. Many years ago I used and really liked Galleria–even purchased its premium upgrade–but it hasn’t been updated in 5 years and has 2 known vulnerabilities.
I ended up choosing fsLightbox. It’s just 31KB and does not require jQuery.
I paid the one-time fee to get Premium in order to get Thumbnails. It was free (inexpensive if you want thumbnails) and worked very well. The main reason I wanted to stick with it is because it’s the library Elfsight uses, and I considered that a huge vote of confidence. I had a deadline to meet and felt confident this would be a good long-term choice.
I tried several others that did not work but cannot remember which those were. If you don’t want fsLightbox, Swiper and Slider Pro might be worth considering, but I cannot remember if I tried those. lightGallery looked good, too, but it requires an affordable one-time payment to be allowed to use it for commercial use.
You could adapt my fsLightbox script (at the top of this article) to work for Swiper or Slider Pro or any other one you want to try.
Why use Go High Level (GHL)?
I love so much about GHL, one of the things being unlimited uploads included in the price.
Although I’m a WordPress developer and there are dozens of good lightbox options for WP, I didn’t want to host and maintain this single landing page on WordPress. I feel like every WP site is a forever-future obligation to maintain.
Additionally, I like overcoming technical challenges and knew that others using GHL would appreciate a robust gallery solution. The GHL community–just like the WP community–is one of the major benefits, and I’m happy to contribute!
Custom Photo Gallery on HighLevel (GHL) Websites
GHL released a photo gallery block in their builder in late October 2024. It’s easiest to use theirs unless you need something my gallery offers that theirs does not.
I built a single property real estate listing website–where the photo gallery is the primary feature–and needed an appealing, smooth, cross-browser image gallery.
After many hours of research and testing, I finally got an elegant solution I’m very happy with but definitely wish it wasn’t so much effort to accomplish.
I’m sharing what worked for me because it’s really the only GHL solution other than embedding from an external source, such as Elfsight, SmugMug, or Flickr.
Table of Contents
Here’s my solution
GHL’s Image Slider element didn’t satisfy me
After testing HighLevel’s built-in “Image Slider” element, I found it lacking in multiple ways for my use case:
Challenges custom coding in GHL’s websites
HighLevel’s website builder uses Nuxt/VueJS so it’s not just outputting static HTML from GHL’s drag-and-drop builder–including whatever you put in the Code Editor element. This means copying and pasting code you find online is unlikely to work because you first need to wait for Nuxt to render the page itself via JavaScript, again instead of raw HTML output.
My Requirements
If I’m going through all this effort, I’m going to get exactly what I want:
Testing different lightbox and slider libraries
If GHL’s builder was basically a static site generator (i.e. not using Nuxt or similar), it’d be easy to drop-in almost any image gallery library. I went through several iterations of my custom code (since each gallery requires different markup) and had to learn the hard way that many didn’t work within GHL. Some even worked fine in a static HTML site I tested and then in GHL the library must have just been incompatible.
I initially searched for a slider (also called a carousel or slideshow) but realized I was actually wanting a lightbox. Although some sliders can effectively act as a lightbox, I wanted to stay away from overkill options since I knew I wanted to focus on displaying images.
Another consideration is how current the image gallery script is. Browsers are always changing and libraries that get abandoned are subject to not working across all browsers or, worse, falling victim to a code vulnerability.
I found Fancybox free and feature-rich, it didn’t play nice with GHL, possibly because it required jQuery. Many years ago I used and really liked Galleria–even purchased its premium upgrade–but it hasn’t been updated in 5 years and has 2 known vulnerabilities.
I ended up choosing fsLightbox. It’s just 31KB and does not require jQuery.
I paid the one-time fee to get Premium in order to get Thumbnails. It was free (inexpensive if you want thumbnails) and worked very well. The main reason I wanted to stick with it is because it’s the library Elfsight uses, and I considered that a huge vote of confidence. I had a deadline to meet and felt confident this would be a good long-term choice.
I tried several others that did not work but cannot remember which those were. If you don’t want fsLightbox, Swiper and Slider Pro might be worth considering, but I cannot remember if I tried those. lightGallery looked good, too, but it requires an affordable one-time payment to be allowed to use it for commercial use.
You could adapt my fsLightbox script (at the top of this article) to work for Swiper or Slider Pro or any other one you want to try.
Why use Go High Level (GHL)?
I love so much about GHL, one of the things being unlimited uploads included in the price.
Although I’m a WordPress developer and there are dozens of good lightbox options for WP, I didn’t want to host and maintain this single landing page on WordPress. I feel like every WP site is a forever-future obligation to maintain.
Additionally, I like overcoming technical challenges and knew that others using GHL would appreciate a robust gallery solution. The GHL community–just like the WP community–is one of the major benefits, and I’m happy to contribute!
Learn more about HighLevel, including getting signup bonuses through me: https://tourkick.com/HighLevel/