
12
Making images clickable on the website
First, a brief explanation about Bolt CMS - I use markdown for writing articles. Markdown is then converted to HTML, and for images there are basically two options:
- Insert just an image

- Wrap the image in a link
[](url)
so it opens on click, but this will close the current page, and viewing the original image in the browser isn't very user-friendly.
Choosing a Solution
For the solution, I turned to... Cursor, asking to make all post images clickable. I had what I thought was a complex idea - to make all images live in a single popup where you could browse through them, so I started with something simple - just requesting to open the original image in a popup on click.
The first attempt was unsuccessful as Cursor tried to connect non-existent libraries from the site's assets. After correction, glightbox was taken from CDN:
1. Library Integration
The necessary styles and scripts were added to the main template file:
<!-- GLightbox CSS -->
<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">
<!-- At the end of the file before </body> -->
<!-- GLightbox JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
2. Lightbox Initialization
Since all article HTML is generated - it's easier to enhance it using JS.
JavaScript code was added to the post template that finds all images in the article content and makes them clickable:
document.addEventListener('DOMContentLoaded', function() {
// Find all images inside content fields
document.querySelectorAll('.card-body [data-bolt-field] img').forEach(function(img) {
// Skip if the image is already wrapped in a link
if (img.parentElement.tagName === 'A') return;
// Create link element
var link = document.createElement('a');
link.href = img.src;
link.className = 'glightbox';
link.setAttribute('data-gallery', 'article-images');
link.setAttribute('data-description', img.alt || '');
// Add styles for the image
img.style.transition = 'transform 0.3s ease';
img.style.maxWidth = '100%';
img.style.height = 'auto';
// Wrap the image in a link
img.parentNode.insertBefore(link, img);
link.appendChild(img);
});
// Initialize GLightbox
const lightbox = GLightbox({
touchNavigation: true,
loop: true,
autoplayVideos: true
});
});
Result
You can see an example by clicking on this image:
Now you can view all uploaded images in articles at their original resolution (which is another reason to look at previous articles). When clicked, a beautiful lightbox opens where you can additionally zoom in on the image and switch between all post images without leaving the popup, as well as see image captions (I usually leave them in alt text).
And that's it - what I had been planning to do for many years was accomplished in 5 minutes and 3 requests to Cursor. Lately, I've been making quite a few changes to the blog, with recent view count modifications being among them.
Without modern AI tools, I wouldn't have gotten to this, or if I had, it would have taken much more time.
No comments yet
-
Project Caretaker. Part 3. Photoresist
Mastering new technologies. Not just Toner Transfer. -
Project Caretaker. Part 2. Design
Given my lack of advanced artistic skills, I'll turn to external help here. For… -
Project Caretaker. Part 1. Beginning
Project Caretaker - a remotely controlled robot on a tracked platform with came… -
Wire Size Calculator
While working on various DIY projects, I always find myself searching for the… -
Gift box with AI
The time has come when AI can not only respond in chats and be used in digital… -
Making images clickable on the website
I often insert high-quality images, but until now there wasn't a convenient way…