Вывод всех изображений полной новости в виде галереи - {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.1, 19.0. Но и на более ранних версиях должно работать, изменений fullimage-x последние версии кажется не были кардинальными.
PS выложил чтоб не потерять, но может быть и пригодится кому-нибудь данный хак.