Hey all, I’ve posted about this before, but still haven’t quite found the answer, so I thought I’d try again.
I’m using the Nurui theme from Fueko, and often write about photography. As such I use a lot of images and gallery cards on my blog, but the way images appear isn’t quite how I’d like them. You can see how galleries appear on this theme on the corresponding style guide page.
I’d really just love the default ghost galleries, as shown in this blog post from 2018. I’ve asked the theme developer about this, but they say the implementation of galleries in Nurui is the same as stock; though given how differently they appear, I’m not quite sure how that could be.
Where does the behavior of these galleries usually live in a theme? I’d love to literally overwrite the existing code with the default, but I can’t quite find it. I see the kg-gallery-container elements on the page, but in the theme only in my CSS file. Any ideas?
I took a quick look at the theme’s style guide page and it looks like the default gallery behaviour with some minor CSS tweaks to give images rounded corners.
If you can explain exactly what it is you see as different/want to change it will be easier to help
Thanks for taking a look, Kevin! That’s interesting… Personally, I can do without the “zoom in” animation on Nurui; just opening the simple lightbox, which you can arrow through the images, access some controls like the fullscreen option, etc., would be ideal.
Not sure how much this comes down to the theme, but the overall speed as well. Of course the animation plays a part, but clicking one image to view it larger and then shrinking it before clicking the next image, it can get tripped up sometimes.
I need to review the documentation on best practices for images, but getting a snappy lightbox a user could scroll through would go a long way for me!
I’m using theme by Fueko too, and planning to switch lightbox and add photoswipe.
Fueko using lightense.js for almost all his themes. It’s light weight and beautiful, the reason I want to change it just because on mobile devices, pictures can’t upscale by zoom in by fingers after click the pic. All action bring pics back to thumbnail status.
The script usually contains in the assets/js/post.js, u can try to replace lightense.js to another lightbox, and customize some styles and functions by checking how lightense.js been used before.
I will try to do this but not now because I don’t have PC right now, to edit these codes on mobile devices is pretty difficult, plus I don’t have knowledge of coding, so~
I know how frustrating it can be to try and get galleries looking just right. Since the developer says the gallery setup is the same as the stock Ghost theme, it’s possible there’s something in the theme’s custom CSS that’s changing the layout.
Minus the linked corners, this looks like basically the same thing in terms of how the layout looks on the page.
When you say they look different, you meant that you can’t click right/left to move through them? That’s a clear difference between them, at least when I tested on chrome/window.
@fueko , tagging you here since your theme is under discussion!
Hi all! I’ll try to answer the questions raised here regarding galleries in my themes. The themes use the default configuration provided by Ghost. In addition, I use the lightense-images.js script, which enables image zooming.
I think the confusion is caused by the example on the Ghost blog, which shows the ability to scroll through images after zooming in. This might suggest that it’s a default configuration, but it’s actually specific to the theme Ghost is using. By default, Ghost doesn’t offer image zooming or arrow-key navigation for images.
I always aim to minimize the scripts used, so right now, I’m only using the image zooming option. Ghost already limits the maximum number of images in a single gallery to 9 (which is quite a small number), so it doesn’t yet seem worthwhile to switch to the PhotoSwipe script, in my opinion.
It might be ideal if Ghost offered a default library similar to PhotoSwipe for galleries, but optimized specifically for Ghost and stripped of unnecessary functionality :)
I have another question about a function of lightense effect in ur theme, which is once click a image from gallery, the image (thumbnail one) will direct been used to upscale, no the original (the bigger) one. Most of time this will makes the pic looks blurry. Also, I found out there will starting a request of the original image after click thumbnail image (at least the dev tool panel shows as this), the original image requested and loaded, but never been used.
I updated that part of js code in my blog already, now it works fine, the original higher resolution image will shows up after click thumbnail image from gallery. Not sure is this a bug or something else. Send a report here.
Hi @xsnaruto, it may have been an unexpected issue in your configuration, as the zoom effect uses the original image rather than a thumbnail. To be precise—Ghost doesn’t create thumbnails specifically for galleries, so the script enlarges the image as it appears in the gallery. Therefore, it’s possible there was some issue between the zoom animation and the final display. It’s also possible that you’re using an older version of the theme, where I used the MediumZoom script, which only scaled the image displayed in the gallery grid without rendering it fully.
If you need further assistance on this matter, please send me the details directly to my personal email.
I’m ok because I already edited the code to suit my needs. (I will send mine part of that code to ur by email, to see if there’s any chance to optimize them better).
I tried to click image from gallery on ur demo site (Maido), smaller image (under image/size/w1000) scaled, but I noticed that new activity shows up in network panel, which is requesting the original image (the same image path but without size/w1000).
If the original one will never been use, I think it shouldn’t be requested. And what if the original one already downloaded, it should be used for a better quality image experience.
Hey all, jumping back in to this older thread here.
Appreciate fueko and the ghost staff members for weighing in here. Perhaps my original inquiry was misplaced, but yes; it’s the additional UI elements / options present on the ghost demo page I first linked to that I’d like to integrate:
I definitely agree with fueko that 9 images is a small limit. I’d love an option to increase that a bit, and to find a way to add these UI elements, particularly the ability to click an arrow, use the arrow keys, or swipe on mobile to get to the next image in the gallery. Still haven’t found a way to integrate these into my setup.
As someone who writes about photography a good bit, clicking an image to get a single image in lightbox, and then having to exit to see another is not really an ideal user experience, in my opinion.
