Делаем картинки на сайте кликабельными

Для начала немного пояснений по Bolt CMS - я использую markdown для написания статей. Далее markdown уже конвертируется в HTML, и для картинок по факту есть два варианта:

1. Вставить просто картинку ![alt](url)
2. Обернуть картинку в ссылку [![](url)](url), чтобы по клику она открывалась, но при этом будет закрываться текущая страница, да и просматривать оригинал картинки в браузере не очень юзер френдли.

Выбор решения

За решением я пришел ... в Cursor, попросив сделать все картинки постов кликабельными. Причем у меня была как я думал сложная идея - сделать чтобы все картинки жили в едином попапе и их можно было перелистывать, поэтому я начал с простого - попросил просто по клику открывать исходную картинку в попапе.

Первая попытка оказалась неудачной, cursor подключил несуществующие библиотеки из ассетов сайта, после корректировки был взят glightbox с CDN:

1. Подключение библиотеки

В основной файл шаблона добавлены необходимые стили и скрипты:

<!-- GLightbox CSS -->
<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">

<!-- В конец файла перед </body> -->
<!-- GLightbox JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

2. Инициализация лайтбокса

Т.к. весь HTML статьи генерируется - доработать проще уже средствами JS.

В шаблоне записи был добавлен JavaScript-код, который находит все изображения в контенте статьи и делает их кликабельными:

document.addEventListener('DOMContentLoaded', function() {
    // Ищем все изображения внутри полей контента
    document.querySelectorAll('.card-body [data-bolt-field] img').forEach(function(img) {
        // Пропускаем если изображение уже обернуто в ссылку
        if (img.parentElement.tagName === 'A') return;

        // Создаем элемент ссылки
        var link = document.createElement('a');
        link.href = img.src;
        link.className = 'glightbox';
        link.setAttribute('data-gallery', 'article-images');
        link.setAttribute('data-description', img.alt || '');

        // Добавляем стили для изображения
        img.style.transition = 'transform 0.3s ease';
        img.style.maxWidth = '100%';
        img.style.height = 'auto';

        // Оборачиваем изображение в ссылку
        img.parentNode.insertBefore(link, img);
        link.appendChild(img);
    });

    // Инициализируем GLightbox
    const lightbox = GLightbox({
        touchNavigation: true,
        loop: true,
        autoplayVideos: true
    });
});

Результат

Пример можете посмотреть, кликнув на этой картинке:

Теперь вы можете просмотреть все загруженные изображения в статьях в оригинальном разрешении (это еще один повод посмотреть на предыдущие статьи). При клике открывается красивый лайтбокс, в котором можно дополнительно увеличивать изображение и переключать все картинки поста не выходя из попапа, а также видеть подписи к картинкам (обычно я их оставляю в alt).

И все, т.е. то, что я собирался сделать уже много лет было сделано за 5 минут и 3 обращения к Cursor. Последнее время довольно много изменений вношу в блог, недавние правки по просмотрам - из их числа.

Без современных AI инструментов я бы до этого не добрался, а если бы и добрался - то это заняло бы куда больше времени.