Replace Theme's Gallery Behavior with Ghost Default

Using Ghost
1

Hi there, I’ve posted about this before, but still haven’t figured out how to implement it well. I’m using the Nurui theme for my blog, and the way it implements the gallery is a bit different from the Ghost native version.

You can see the current behavior on the Nurui style guide page, here.

Clicking on an image in the gallery pulls it up in a lightbox, but doesn’t give the option to arrow between images, only to click to shrink down again.

I’d like to overwrite this functionality with the gallery implementation first shown off in Ghost 2.0, here, where clicking an image in the gallery brings it up in the lightbox, allows fullscreen viewing, allows arrowing between images, etc.

What would I need to do to accomplish this? If I find the section responsible for gallery styling in my screen.css file, and replace that with the CSS code listed here, and add a gallery.js file (as posted here) to my assets > js folder, should that do it?

Thanks.

2

Hello.

Have you been able to solve the problem and if so, how? I also don’t want to have to click on each image in the gallery individually.

Best regards
Marcus

3

You’d need to edit the theme. I’d remove the other lightbox code, and be sure to run the theme’s build process so that you get it out of the minified js also. (I think that theme uses gulp?)

4

Thanks for your quick reply. Since I’m a complete beginner when it comes to Gjost (I used WordPress before) and I’m not particularly well versed in technology, I can’t do much with your answer. I know where in the theme I can insert code snippets, but that’s it. Well, the matter seems to be a bit complicated, at least for me. By the way, Ghost is hosted locally because I have to comply with the GDPR regulations.

Nevertheless, thank you again for your answer.

Best regards
Marcus