Hello, I’m trying to make use of the screenshot lightbox feature of game pages in a devlog. In case I’ve got the name wrong, what I’m referring to is the ability to have small images embedded in the page which can be clicked to open the full size image in an overlay, with arrow buttons to navigate between the different images.

Looking at the source for a screenshot in the sidebar of a game page, I can see:

<a data-image_lightbox="true" target="_blank" href="https://img.itch.zone/URL_TO_FULL_IMAGE">
<img src="https://img.itch.zone/URL_TO_DOWNSCALED_IMAGE" data-screenshot_id="ID_NUMBER" srcset="https://img.itch.zone/URL_TO_DOWNSCALED_IMAGE 1x, https://img.itch.zone/URL_TO_MIDSCALED_IMAGE 2x" class="screenshot">
</a>

I don’t know if downscaled versions of all uploaded images are generated, or how to get the URL to them. But you can just use the full original image everywhere. Most of the above properties are optional and can be simplified right down to:

<a data-image_lightbox="true" target="_blank" href="https://img.itch.zone/URL_TO_FULL_IMAGE">
<img src="https://img.itch.zone/URL_TO_FULL_IMAGE">
</a>

And putting that into a devlog works! The image is shown as large as possible within the body of the devlog, and it’s clickable to open the full image in the lightbox overlay. The only thing that doesn’t work is the arrow buttons to navigate between all the lightbox images. I’m guessing the data-screenshot_id property is relevant here, but I’m not sure what that should be set to for each image. Simple consecutive numbers didn’t work.