The Галерея поле позволяет редактору передать вашему виджету целый набор изображений за один ход: открыть медиатеку, выбрать десять фотографий, сделано Внутри главных аддонов Виджет Строительэто поле для сетки портфолио, фотостен и каруселей, где бы количество изображений ни принадлежало владельцу сайта, а не автору виджетов.
Поле Галерея поддерживает Условия как и любой элемент управления, и его изображения визуализируются через Механизм шаблонов Twig-синтаксиса, тот же двигатель, который работает {% for %} петли и {% if %} проверяет ваш шаблон. оба руководства охватывают настройку и ограничения.
Поскольку значение представляет собой массив изображений, соединение с вашим HTML - это цикл, а не токен. А {% for %} блок печатает разметку изображения один раз на фотографию, в порядке, в котором галерея держит их. десять фотографий рендеринг десять пунктов. добавьте еще два с панели и еще два элемента появляются, без изменений шаблона.
Что делает поле Галерея #
- Открывает медиатеку WordPress в режиме мультивыбора с панели Элементор.
- Хранит упорядоченный массив изображенийкаждый несет свое
idиurl. - Подает ваш шаблон через a
{% for %}петля, одна итерация на изображение. - Оставляет макет на вашем CSS: цикл печатает предметы, сетка их оборачивает.
- Поддерживает набор изображений по умолчанию и динамические значения, так что виджет может поставлять предварительно заполненный.
Если вы новичок в создании виджетов, начните с Обзор виджета-строителя первый.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет портфолио фотографий, который отображает сетку из 3 столбцов, по одной ячейке на изображение галереи.
Как добавить поле Галерея #
Найдите Галерея поле на панели слева редактора Widget Builder, сгруппированное с другими медиаполями.
Перетащите его в раздел под Содержание вкладка После приземления слева открываются варианты поля.
Объяснены параметры поля галереи #
- Этикетка: текст, показанный над элементом управления в Elementor, например “Portfolio Images”.
- Имя: уникальный идентификатор поля, букв, цифр, и подчеркивает только. ваш цикл относится к этому имени, например
portfolio_gallery. - По умолчанию: стартовый набор изображений, поэтому сетке есть что показать в момент падения виджета.
- Динамический: позволяет набору изображений поступать из динамического источника, а не из выбранного вручную выбора.
- Описание, Показать метку, Разделитель: стандартные настройки отображения, плюс Условия показа поля только тогда, когда другое управление имеет определенное значение.
Подключите галерею к своему HTML с помощью цикла #
В Галерее нет токена с одним значением. Его значение представляет собой массив медиа-элементов, поэтому шаблон переносит разметку по изображению в a {% for %} блок, той же формы, которую использует Репитер
<div class="portfolio-grid">
{% for img in portfolio_gallery %}
<figure class="portfolio-cell">
<img src="{{ img.url }}">
</figure>
{% endfor %}
</div>portfolio_galleryэто название поля.imgэто переменная цикла, которую вы изобретаете; называйте это как угодно.- Каждый элемент раскрывает свои свойства посредством точечной записи:
{{ img.url }}для URL-адреса файла,{{ img.id }}для идентификатора вложения. - Блок печатает один раз за изображение, в порядке галереи.
Пустая галерея петли ноль раз, что обычно поведение вы хотите. оберточная div все еще рендеринг, хотя, и пустой контейнер с заполнением или граница появляется как таинственный серый ящик на странице Когда пустая галерея не должна оставить ничего позади, охранять весь блок:
{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}Остерегайтесь, чтобы тянуться к голому {{ portfolio_gallery }} по привычке. на поле Media, которое выводит ярлык, печатает URL; здесь значение - это список изображений, и только цикл попадает на них. если ваша сетка отображается пустой, в то время как панель явно содержит фотографии, недостающее {% for %} почти всегда почему.
Макет остается на вкладке CSS. Сетчатый контейнер, такой как grid-template-columns: repeat(3, 1fr) обертывает сколько бы ячеек ни создавал цикл, поэтому двенадцать фотографий составляют четыре строки, и ни шаблон, ни редактор не думают об этом.
Используйте элемент управления "Галерея" в Elementor #
Добавьте свой пользовательский виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта. поле Галерея отображается как поле добавления изображений под вашей меткой с миниатюрами текущего набора после его существования.
Щелкните его, и медиатека откроется в режиме мультивыбора. выберите набор, подтвердите, и сетка заполнится в предварительном просмотре. повторное открытие галереи позволяет редактору добавлять, удалять и переупорядочивать изображения, и страница следует новому порядку при следующем рендеринге.
Обычные случаи использования #
- Портфельные и фотосети, одна ячейка на изображение, сетка CSS обрабатывает строки.
- Коллекции Lightbox где каждый элемент цикла связывает свой полноразмерный URL-адрес для сценария лайтбокса.
- Изображение карусели, цикл печатает слайды и вкладка JS виджета запускает слайдер.
- Стены логотипа клиента поддерживается владельцем сайта, не касаясь виджета.
- Галереи "До и после" или проектные галереи это растет с каждой готовой работой.
Советы по работе с полем Галерея #
- Петля - это соединение. Полезного прямого отпечатка галереи нет; только
{% for %}…{% endfor %}достигает изображений. - Использовать
{{ img.url }}внутри петли. Каждый элемент представляет собой медиамассив, и в обозначении точек выбираются URL-адрес и идентификатор. - Пусть CSS владеет макетом. Сетка с фиксированными столбцами поглощает любое количество изображений; шаблон остается одним фигурным блоком.
- Охраняйте обертку, когда пустая означает невидимая.
{% if portfolio_gallery %}удерживает незаполненный виджет от рендеринга пустого контейнера. - Отправить набор по умолчанию. Даже три фотографии-заполнителя делают виджет разборчивым при первой же падении.
- Повторный порядок на панели, а не шаблон. Цикл следует порядку галереи, поэтому перетащите миниатюры, и страница переставится сама.
Часто задаваемые вопросы #
Что такое поле Галерея в Master Addons Widget Builder?
Поле Галерея добавляет многоизображение медиа библиотека выбор в пользовательский виджет Элементор Выбор хранится как упорядоченный массив изображений, каждый со своим id и urlи ваш шаблон печатает их с помощью {% for %} цикл, одна итерация на изображение.
Как отобразить изображения галереи в моем HTML?
Заверните разметку по изображению в цикл: {% for img in portfolio_gallery %}<img src="{{ img.url }}">{% endfor %}, где portfolio_gallery является Имя поля Блок визуализирует один раз на изображение в порядке галереи.
Почему моя галерея ничего не печатает?
Сначала проверьте наличие голого токена. {{ portfolio_gallery }} не печатает список изображений; значение представляет собой массив элементов и только a {% for %} цикл читает его. Внутри цикла, убедитесь, что вы используете {{ img.url }} вместо одной переменной цикла, если URL-адрес явно вам нужен.
Как сетка обрабатывает больше изображений?
Вот работа виджета CSS Контейнер с, скажем repeat(3, 1fr) столбцы автоматически переносят четвертое изображение в новую строку. Цикл просто выводит ячейки; таблица стилей решает, как они текут.
Могут ли редакторы изменить порядок изображений?
Да. повторное открытие галереи на панели Элементор позволяет добавлять, удалять и перетаскивать изображения в новый порядок, и цикл отображает их именно в таком порядке.
Должен ли я использовать Галерею или Ретранслятор с подполем изображения?
Галерея, когда предметы являются изображениями и ничем иным, это один сборщик и один цикл. Дотянитесь до репитера, когда каждому изображению нужны компаньоны, поле субтитров, ссылка, тег категории, поскольку каждый ряд репитера может нести эти дополнительные суб-поля рядом с фотографией.
Завершая #
Поле Widget Builder Gallery превращает виджет в контейнер, который заполняет владелец сайта: мультивыбор в библиотеке, a {% for %} зацикливайте шаблон, и CSS решает, как протекает набор. Для слотов с одним изображением его брат Медиаполе охватывает героев, аватары, логотипы с одинаковыми правилами точечной записи Исследуйте остальное Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.
