By Clifford P on June 29, 2024

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.

Here’s my solution

1. Upload your already-optimized images into GHL’s Media Storage (no single file larger than 1MB, probably not larger than 2000px)
2. Get my code here
3. 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.
4. Add the header and body code to your Website’s or Funnel’s Settings
5. Add a Code Editor element to your webpage and paste my code.
6. Then edit my pasted code to input your Media File IDs.
7. 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!

Learn more about HighLevel, including getting signup bonuses through me: https://tourkick.com/HighLevel/