Актульнаый релиз „DataLife Engine 19.0 Final“ buildid 109

подробнее о релизе

Главная страница / DataLife Engine / Плагины для DLE / Вывод всех изображений полной новости в виде галереи - {fullimage-all}

Вывод всех изображений полной новости в виде галереи - {fullimage-all}

22 января 2026 | 13:39 | Четверг
41
0
[ Рейтинг: 0 / Голосов: 0 ]
Вывод всех изображений полной новости в виде галереи - {fullimage-all}

Довольно специфический хак, но вчера заметил, что при вставке в полную новость miniposter мне обрезает изображения по ширине, и иногда не понятно, что же в итоге на скрине отображено. Поэтому решил добавить новый тег {fullimage-all}, который будет выводить все изображения из поля «полная новость» в виде адаптивной галереи.

Можно использовать данный хак, например, для вывода скриншотов/кадров... к фильму. К примеру, описание материала идёт только в краткой новости, и чтоб не использовать доп поля (изображение, галерея...), можно для этого использовать поле полной новости.

После установки плагина нужно добавить в CSS стили:

/* Стили для галереи {fullimage-all} */
.fullimage-all-container {
    margin: 25px 0;
    clear: both;
}

.fullimage-all-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Стили для Highslide/Fancybox в DLE */
.highslide {
    cursor: pointer;
    text-decoration: none;
    outline: none;
}

.highslide img {
    border: 2px solid #f0f0f0;
}

.highslide:hover img {
    border-color: #007bff;
}

/* Адаптивность */
@media (max-width: 1200px) {
    .fullimage-all-gallery {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 992px) {
    .fullimage-all-gallery {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .fullimage-all-gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    .gallery-thumb {
        height: 120px;
    }
}

@media (max-width: 576px) {
    .fullimage-all-gallery {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .gallery-thumb {
        height: 100px;
    }
}

В fullstory.tpl использовать:

<!-- Вывод одного изображения -->
<img src="{fullimage-1}" alt="Первое изображение">

<!-- Вывод всех изображений в галерее -->
{fullimage-all}

<!-- Можно комбинировать -->
<div class="article-image">
    <img src="{fullimage-1}" alt="Основное изображение">
</div>

<div class="article-gallery">
    {fullimage-all}
</div>

<!-- Условный вывод с текстом -->
[fullimage-2]
<div class="additional-content">
    Текст, который покажется только если есть второе изображение
</div>
[/fullimage-2]

Скачать плагин fullimage-all:

⚠️ Войдите в аккаунт для доступа к контенту

Проверка была на DLE 18.119.0. Но и на более ранних версиях должно работать, изменений fullimage-x последние версии кажется не были кардинальными.

PS выложил чтоб не потерять, но может быть и пригодится кому-нибудь данный хак.

Комментарии:
ℹ️
 
Модули для создания киносайта и не только на базе DataLife Engine, и многое другое...
Просто блог Евгения Попова, он же - byroot © 2015-2026 | Карта сайта