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:

1. Insert just an image ![alt](url)
2. Wrap the image in a link [![](url)](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.