Photoswipe or Other Lightbox Implementation?

Developer help
1

Hi there! The theme I’m using (Nurui by Fueko) uses a slightly different implementation of the Gallery card than the default Casper theme by Ghost does. You can see how it looks on their demo page, here.

I’d like to replace this with the default implementation, as shown in the official announcement blog post. I’d also be fine implementing Photoswipe or something similar. So far, I’ve tried the solutions listed in a few posts like this one and this one, but no dice yet. I also tried adding the Gallery CSS file to the assets/css folder and the Gallery JS to assets/js, but no luck.

Anyone have any advice for implementing an overwrite or new lightbox offering into a Ghost theme? Or anyone gotten Photoswipe to work (the docs were a bit daunting, to be honest!)?

Thanks!

2

Just to be clear, gallery and lightbox/photoswipe are two, totally different things.

The gallery is just the alignment of images in a grid, the CSS/JS for which, Ghost provides.

Lightbox/photoswipe are added at the theme level. This may be clear, but wanted to mention it just in case.

Ghost’s Ease theme uses Photoswipe (see Style Guide), so you can check out how it implements it to see an idea of what’s involved: Ease/pswp.hbs at 03c5c8916c5524adce8a419a89757650ff894e91 · TryGhost/Ease · GitHub

What don’t you like about how you’re current theme is doing it?

3

Hey Ryan! Nice to see you again.

Yeah sorry, might’ve used those a bit interchangeably. I just want readers to be able to swipe / arrow through photos, rather than the lightbox from the gallery only loading one file at a time (see how it works currently on my blog here.)

If I add that handlebar file from the Ease theme to my theme, is there a way to add that functionality?

4

Your site looks great.

Integrating Lightbox functionality will require some custom coding. The example from Ease is more of a guide of how it can be done—it’s not a drop-in solution.

5

Thanks Ryan.

Got it. I’ll look into implementing Photoswipe if I can, then. It’s one of the last items on my blog wishlist!

6

Try it out and don’t hesitate to make another post here if you get stuck. :smile:

7

Hey again! So I tried to get fslightbox installed, because the docs made it seems a bit more straightforward. I was also looking at this guide from Biron themes, though my theme is not from them.

I SSH’d into my hosting server, and installed fslightbox via npm. I also downloaded the JS file from their site, and put it in assets/js/fslightbox.js. Then, via code injection I added these lines:

<script src="assets/js/fslightbox.js"></script>

<script>
const images = document.querySelectorAll('.kg-image-card img, .kg-gallery-card img');

// Lightbox function
images.forEach(function (image) {
  var wrapper = document.createElement('a');
  wrapper.setAttribute('data-no-swup', '');
  wrapper.setAttribute('data-fslightbox', '');
  wrapper.setAttribute('href', image.src);
  wrapper.setAttribute('aria-label', 'Click for Lightbox');
  image.parentNode.insertBefore(wrapper, image.parentNode.firstChild);
  wrapper.appendChild(image);
});

refreshFsLightbox();
</script>

The top is from the fslightbox docs, where I intended to call the application based on where I put it in my theme. The bottom code is from the Biron themes guide, targeting the gallery cards. Unfortunately, did not get it to work so far. I looked through the theme I’m using for how the gallery is built and called, but didn’t find anything that seemed relevant in default.hbs, posts.hbs, etc. There are a few styling options in the CSS file, but I figured that was not it.

Just want to make it so people can swipe or arrow through images in a gallery when in lightbox view. Would appreciate any help getting that set up. Thanks!