Пример использования шорткода figure в Hugo со всеми параметрами и описание всех используемых кодов с пояснениями по каждому:

{ {< figure 
    src="/images/example.jpg" 
    alt="Альтернативный текст изображения" 
    caption="Это подпись к изображению" 
    title="Заголовок изображения" 
    attr="Источник: wildserver" 
    attrlink="https://wildserver.ru" 
    link="https://example.com/full-image" 
    class="custom-figure-class" 
>} }

Разбор кода:

• src: путь к изображению (/images/example.jpg).
• alt: альтернативный текст для SEO и доступности.
• caption: подпись, которая будет отображаться под изображением.
• title: заголовок, всплывающий при наведении.
• attr: источник изображения (автор, сайт и т. д.).
• attrlink: ссылка на источник (Unsplash).
• link: ссылка, ведущая на увеличенную версию изображения.
• class: кастомный CSS-класс для стилизации.

Кастомные CSS-классы в шорткоде { {< figure >} } позволяют изменять внешний вид изображений, делая их более адаптивными и стилизованными.

🔹 Как это работает?

В шорткоде указывается параметр class="custom-figure-class", который затем передаётся в HTML-атрибут class. В результате сгенерированный HTML будет выглядеть так:

<figure class="custom-figure-class">
    <a href="https://example.com/full-image">
        <img src="/images/example.jpg" alt="Альтернативный текст изображения" title="Заголовок изображения">
    </a>
    <figcaption>Это подпись к изображению <span class="image-source"><a href="https://wildserver.ru">Источник: wildserver</a></span></figcaption>
</figure>

Теперь можно задать кастомные стили для .custom-figure-class в файле style.css.

🔹 Примеры кастомизации

📌 1. Выравнивание изображения по центру

.custom-figure-class {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

📌 2. Добавление тени и скруглённых углов

.custom-figure-class img {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}
.custom-figure-class img:hover {
    transform: scale(1.05);
}

📌 3. Адаптивное изменение размера (для мобильных устройств)

.custom-figure-class img {
    max-width: 100%;
    height: auto;
}

📌 4. Добавление стилизованной рамки и фона

.custom-figure-class {
    background-color: #f5f5f5;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 8px;
}

🔹 Как добавить кастомные настройки?

Скопировать файл themes/ink-free/static/css/dark.css в static/css/main.css

🔹 Почему это удобно?

• Можно легко задать разные стили для разных типов изображений (например, .post-image, .profile-avatar, .gallery-item).
• Если в будущем понадобится изменить дизайн, достаточно обновить CSS, а не редактировать весь контент.
• Можно комбинировать классы для создания сложных эффектов (например, lazy-loading, эффекты при наведении и т. д.).

💡 Вывод: Кастомные CSS-классы делают изображения гибкими, стильными и удобными в настройке! 🚀