Хаки и Скрипты Next Generation CMS : TWIG, Изображения, Настройка плагинов : Еще один лайвхак для изображений

irbees2008 Опубликовано - 7 - октября TWIG

Адаптировал: ИИ GPT
Уровень сложности исполнения: Справочник

Всем привет,давненько не было публикаций. Один из пользователей ,Толян , выложил код для слайдера ,мне он показался громозким, вот он

Код:

{% if (p.xfields.poster.value) %}
<div class="fotorama" align="center" data-width="100%" data-nav="thumbs" data-autoplay="false" data-fit="contain" data-allowfullscreen="native"
data-keyboard="true">
(% if not (p.xfields.poster.count < 1) %)<a href="{{p.xfields.poster.entries[0].url }}"><img src="{{p.xfields.poster.entries[0].purl
}}"
alt="{{ news.title }}" /></a>{% endif %}
{% if not (p.xfields.poster.count < 2) %}<a href="{{ p.xfields.poster.entries[1].url }}"><img src="{{ p.xfields.poster.entries[1].purl }}"
alt="{{ news.title }}" /></a>{% endif %}
(% if not (p.xfields.poster.count < 3) %}<a href="{{ p.xfields.poster.entries[2].url }}"><img src="{{p.xfields.poster.entries[2].purl
}}"
alt="{{ news.title }}" /></a>{% endif %)
{% if not (p.xfields.poster.count < 4) %}<a href="{{ p.xfields.poster.entries[3].url }}"><img src="{{ p.xfields.poster.entries[3].purl }}"
alt="{{ news.title }}" /></a>{% endif %}
(% if not (p.xfields.poster.count < 5) %}<a href="{{ p.xfields.poster.entries[4].url }}"><img src="{{ p.xfields.poster.entries[4].purl }}"
alt="{{ news.title }}" /></a>{% endif %}
{* if not (p.xfields.poster.count < 6) %}<a href="{{{ p.xfields.poster.entries[5].url }}"><img src="{{ p.xfields.poster.entries[5].purl
}}"
alt="{{ news.title }}" /></a>{% endif %}
{% if not (p.xfields.poster.count < 7) %}<a href="{{ p.xfields.poster.entries[6].url }}"><img src="{{ p.xfields.poster.entries[6].purl
}}"
alt="{{ news.title }}" /></a>(% endif %)
{% if not (p.xfields.poster.count < 8) %}<a href="{{p.xfields.poster.entries[7].url }}"><img src="{{p.xfields.poster.entries[7].purl
}}"
alt="{{ news.title }}}" /></a>{% endif %}
(% if not (p.xfields.poster.count < 9) %}<a href="{{ p.xfields.poster.entries[8].url }}"><img src="{{ p.xfields.poster.entries[8].purl
}}"
alt="{{ news.title }}" /></a>(% endif %}
{%
if not (p.xfields.poster.count < 10) %}<a href="{{{ p.xfields.poster.entries[9].url }}"><img src="{{p.xfieldsposter.entries[9].purl }"
alt="{{ news.title }}" /></a>{% endif %}
(% if not (p.xfields.poster.count < 11) %}<a href="{{p.xfields.poster.entries[10].url }}"><img src="{{p.xfields.poster.entries[10].purl }}"
alt="{{ news,title }}" /></a>{% endif %}
</div>
{% endif %}

Как видите большеват, ну спросил ИИ как сократить вот он выдал вариант

Код:

{% if p.xfields.poster.value %}
    <div class="fotorama" align="center" data-width="100%" data-nav="thumbs" data-autoplay="false" data-fit="contain" data-allowfullscreen="native" data-keyboard="true">
        {% for poster in p.xfields.poster.entries %}
            <a href="{{ poster.url }}">
                <img src="{{ poster.purl }}" alt="{{ news.title }}" />
            </a>
        {% endfor %}
    </div>
{% endif %}

Что было изменено:
Цикл for: Вместо дублирования каждого условия, теперь используется цикл, который проходит по массиву p.xfields.poster.entries и выводит постеры.

Проверка на существование: Поскольку мы уже проверяем наличие значений через if p.xfields.poster.value, нам не нужно каждый раз проверять количество элементов.

Простота и масштабируемость: Теперь, если постеров будет больше, этот код не потребует изменений — цикл обработает все доступные элементы.

Этот вариант сокращает количество повторяющегося кода и улучшает читаемость.

Ну и конечно надо в этом коде заменить poster на ваше дополнительное поле , у меня это поле imges , выводятся по порядку , как загружались.
Вроде все , пользуемся

Вот демонстрация

Можешь почитать и вот эту статейку " Лайтбокс эффект для Bootstrap"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.