Is there any way to click in the images and see them in a bigger size?

[0xtiago]

Hi guys!

Is there any way to make the pictures in the post "clickable" and see them in a bigger size?
For example, I have this blog post which has tons of screenshots, but unfortunatelly my readers need to open the images in another tab to see them in a good size. I have read the whole documentation, but so far I havent found any answer.

I really appreciate any help. 🙏

Thanks,

Tiago

[Ipstenu]

I’ve been working on that for a bit. I made a mod that kind of does it - https://github.com/JorjaFox/mod-bs5-lightbox - but I’ve started to run into a lot of quirks since the image partial doesn’t actually resize the smaller image (so you load the full size once on view and once on click open).

I have an in progress fix I’ve been messing with all week (you can see the new shortcode here - https://github.com/JorjaFox/website/blob/design/recap-image/layouts/shortcodes/bs5-lightbox.html ) but it’s become very endemic to how I want to save images. I’m particular and want my images to be stored in the specific folders based on where I’m pulling the, down from, and that wouldn’t be the same for most people.

[markdumay]

Thanks for sharing your example and experience @Ipstenu! It's definitely something I'd like to add in a future release. Ideally, Hinode would include a gallery component consisting of a collection of images. Each image would be rendered as a thumbnail, and when clicked, open in full screen with navigation support. I'd imagine you'd set a base folder and specify if the images should be loaded recursively.

I'll submit a new future request to the issue tracker. I can't commit to a timeline yet, but feel free to share your thoughts there. See #1234.

[d-oit]

Had the same idea. Current test:
https://codepen.io/Dominik-Oswald/pen/vYoyboQ

https://www.w3schools.com/howto/howto_css_modal_images.asp

hugo add-on -> adjust for webp and other format
https://hugocodex.org/add-ons/lightbox/

[anoduck]

It is something I will need to integrate into my site as well. In the past, I was able to use drop-in shortcode, such as hugo-gallery-shortcode to do the trick. Admittedly, this solution is not optimal, and may not work.

[d-oit]

This is my current implantation for thumbnail:
https://d-oit.github.io/en/blog/2024-11-13-enhanced-image-handling-on-d-oitgithubio/

TODO - adjust the css / js to use it like this. Not exactly what I want but maybe works for you?
https://github.com/nicokaiser/hugo-theme-gallery

It was easier for me to create a new js instead of customize photoswipe.