Кастомизация блока Media04 в конструкторе Craftum

Что такое Craftum

Craftum — это современный конструктор сайтов, который позволяет создавать адаптивные страницы без кода. Но при желании в любой блок можно вставить свой CSS и JavaScript, что открывает широкие возможности для кастомизации.

Блок Media04

Один из популярных блоков в Craftum — Media04 (галерея изображений). Он используется для отображения коллекций фотографий или товаров в виде сетки.

По умолчанию Media04 имеет:

• сетку из картинок;

• базовую адаптивность;

• поддержку alt, title и name для изображений.

Но у блока нет встроенной возможности выводить подписи под картинками или кастомизировать их внешний вид. Эту проблему легко решить с помощью кода.

Как добавить подписи под изображения

Добавляем на страницу блок other01 из раздела Другое.

Шаг 1. Подключаем в JS-скрипт

Добавляем следующщий скрипт. Он автоматически находит все картинки в Media04 и добавляет к ним подпись из alt и title:

<script>
(function() {
  function addCaptions() {
    document.querySelectorAll(".cli-gallery__pic").forEach(pic => {
      if (pic.querySelector(".img-caption")) return; // не дублируем

      const img = pic.querySelector("img");
      if (!img) return;

      const caption = document.createElement("div");
      caption.className = "img-caption";
      caption.innerHTML = `
        <div class="img-name">${img.getAttribute("alt") || ""}</div>
      `;
      pic.appendChild(caption);
    });
  }

  document.addEventListener("DOMContentLoaded", addCaptions);
})();
</script>

Шаг 2. Добавляем стили

/* Стили для подписи */
.img-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/* Ограничение по строкам */
.img-caption .img-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Решение проблемы разной высоты

В Media04 есть особенность: если у одной картинки подпись длиннее, карточка получается выше. Чтобы все блоки были одинаковыми:

.cli-gallery-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cli-gallery__pic {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-caption {
  min-height: 40px; /* фиксированная высота */
}

Таким образом блок Media04 в Craftum можно кастомизировать:

• выводить подписи из alt/title;

• выравнивать карточки по высоте;

• ограничивать длину текста;

• добавлять плавные hover-эффекты.

Такой подход делает галерею более информативной и аккуратной, а сайт — профессиональным.

Мой Craftum тут.

Заходите в мой тг канал Дизайн дилетант, пишу о своих коммерческих проектах.