Галерея

Поле "Галерея" позволяет редакторам выбирать целый набор изображений одновременно для специального виджета, созданного с помощью главных аддонов Виджет Строитель. Ваш шаблон зацикливается на наборе и печатает по одному элементу на изображение, поэтому виджет растет или сжимается с количеством фотографий. Используйте его для фотосетей, стен портфолио, рядов логотипов и ползунков изображений.

Галерея является Полем Pro. бесплатный плагин включает ограниченный Виджет Строитель, и полный набор полей приходит с Мастер Аддоны Про.

Что делает поле Галерея #

• Добавляет на панель виджета в Elementor поле галереи Редакторы выбирают несколько изображений из Медиатеки за один раз.
• Изображения хранятся в виде списка, в том порядке, в котором редактор их расположил. Каждое изображение имеет id и а url.
• Ваш шаблон печатает список с помощью a {% for %} петля.
• Макет зависит от вашего CSS. Петля печатает предметы, а сетка или гибкий контейнер их расставляет.

Если вы еще не создали виджет, прочтите Обзор виджета-строителя первый.

Прежде чем начать #

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Некоторые изображения в вашей медиатеке.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Photo Grid” с полем Галерея с именем photos.

Как добавить поле Галерея #

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. На Содержание вкладка, добавить раздел, например “Gallery”.
3. Тип gallery в поле поиска слева.
4. Драг Галерея в раздел Его настройки открываются в левой боковой панели.

Объяснены параметры поля галереи #

• Этикетка текст над полем галереи в Elementor, например “Photos”.
• Имя является ли уникальный идентификатор поля и список, по которому вы переходите, например photos. Только буквы, цифры и подчеркивания.
• Описание появляется под контролем в Elementor.
• Изображения по умолчанию имеет Добавить изображения кнопка, которая добавляет слот заполнителя.Наведите курсор на слот для креста, чтобы удалить его, и карандаш, чтобы выбрать реальное изображение для этого слота.

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

Общие настройки продолжают работать, как и в других областях.

Переключите изображения в своем шаблоне #

Галерея - это список, так что {{ photos }} на собственных отпечатках ничего полезного. зацикливайтесь на нем и печатайте каждое изображение внутри цикла:

{% if photos %}
<div class="photo-grid">
  {% for img in photos %}
    {% if img.url %}
      <figure class="photo-cell">
        <img src="{{ img.url }}" alt="">
      </figure>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

• photos это название поля. img это имя, которое вы выбираете для текущего изображения в цикле.
• {{ img.url }} является ли URL-адресом файла изображения и {{ img.id }} является его идентификатором медиатеки.
• Внешний {% if photos %} пропускает всю сетку, когда галерея пуста.
• Внутренний {% if img.url %} пропускает любой элемент без URL-адреса, например заполнитель, с которого начинается новый виджет.

Расположите элементы на вкладке CSS. Эта сетка делает три равных столбца и обрезает каждую фотографию до одной и той же формы:

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.photo-cell { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

Нажмите Сохранить настройки когда закончишь.

Используйте элемент управления "Галерея" в Elementor #

Добавьте виджет на страницу, или перезагрузите редактор, если страница уже была открыта. поле галереи показывает, сколько изображений выбрано и миниатюра каждого. значок корзины очищает весь набор.

Щелкните миниатюры, чтобы открыть окно галереи WordPress. перетащите изображения, чтобы изменить их порядок, нажмите Обратный порядок чтобы перевернуть его, используйте Добавить в галерею чтобы выбрать больше изображений и щелкнуть крестик на изображении, чтобы удалить его. Нажмите Вставить галерею для сохранения набора. сетка обновляется в том же порядке.

Обычные случаи использования #

• Фото - и портфолио сетки.
• Стены логотипа для клиентов или партнеров.
• Ползунки изображений, с петлевой печатью одного слайда на изображение.
• Наборы изображений "до и после" или продукта внутри карты.

Советы по работе с полем Галерея #

• Всегда заверните разметку {% if img.url %} внутри цикла, поэтому новый виджет не показывает пустые поля изображений.
• Использовать aspect-ratio и object-fit: cover так что фотографии разных размеров выстраиваются в ряд.
• Пусть CSS решает столбцы. сетка обертывает любое количество изображений без изменений шаблона.
• Добавить alt атрибут. цикл выдает идентификатор изображения, если вам нужно напечатать подпись или альтернативный текст из другого поля.
• Для одного изображения используйте Медиаполе. Для изображений, каждому из которых нужен свой текст или ссылка, используйте Поле ретранслятора.

Часто задаваемые вопросы #

Завершая #

Добавьте поле "Галерея", перейдите через него {% for %}пропустите пустые предметы с помощью {% if img.url %}и позвольте сетке CSS обрабатывать макет. Затем редакторы добавляют, удаляют и переупорядочивают изображения из Elementor. См Руководство по синтаксису Twig для получения дополнительной информации о циклах и проверках, и ценообразование за то, что включает каждый план.