Медиа

The Медиаполе подключает пользовательский виджет к медиатеке WordPress.Drop the field in, и любой, кто редактирует виджет в Elementor, получает знакомый выбор изображения: нажмите, выберите или загрузите, сделано Внутри главных аддонов Виджет Строительэто поле, стоящее за изображениями героев, аватарами, логотипами и любым другим слотом для одного изображения, который нужен виджету.

Как и каждое поле Widget Builder, Media поддерживает Условия для видимости панели. Его токен отображается через Механизм шаблонов Twig-синтаксиса, который автоматически печатает URL-адрес файла, так что <img src="{{ photo }}"> просто работает Оба руководства охватывают детали.

В отличие от текстового поля, значение поля Media не является одной строкой Это массив, несущий файл url, id, altи многое другое, и ваш шаблон достигает каждой части с точечной записью. Есть один дружелюбный ярлык: печать поля напрямую дает вам URL-адрес. И одна привычка, которую стоит выработать с первого дня, охраняя разметку с помощью {% if %} таким образом, пустое поле не оставляет после себя сломанного изображения.

Что делает медиа-поле #

• Открывает медиатеку WordPress с панели Элементор загрузите или выберите существующие файлы.
• Хранит выделение в виде массива с url, idи alt среди его ключей.
• Печатает URL-адрес на прямом токене: {{ hero_image }} выводит URL-адрес файла в виде ярлыка.
• Разоблачает каждое свойство по точечной записи: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• Может фильтровать библиотеку по типу носителя, изображение, видео или аудио, и поддерживает динамические значения.

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

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

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - это виджет героя ресторана с одним полем Media с именем hero_image это наполняет знамя.

Как добавить поле "Медиа" #

В редакторе Widget Builder найдите Медиа поле на панели слева, сгруппированное с другими медиаполями.

Перетащите его в раздел под Содержание вкладка; изображение является содержимым, даже когда оно оказывается фоном CSS. Как только оно приземляется, параметры поля открываются слева.

Объяснены варианты поля СМИ #

• Этикетка: текст, показанный над выбором в Elementor, например “Hero Image”.
• Имя: уникальный идентификатор поля, букв, цифр и подчеркиваний только, например hero_image.
• По умолчанию: стартовый файл в виде пары URL-адресов и идентификаторов, поэтому виджет попадает на страницу, которая уже выглядит готовой.
• Тип носителя: фильтрует то, что предлагает библиотека, изображение, видео или аудио, не позволяя редакторам подключать mp3 к тегу img.
• Динамический: позволяет получить значение из динамического источника, а не из фиксированного выбора.
• Описание, Показать метку, Разделитель: стандартные настройки отображения, плюс Условия показа поля только тогда, когда другое управление имеет определенное значение.

Подключите поле "Медиа" к своему шаблону #

Значение представляет собой массив, и правила шаблона следуют из этого Прямой токен является ярлыком для наиболее распространенной потребности:

<img src="{{ hero_image }}">

Печать значения массива напрямую выводит его url ключ, так что это делает файл URL. явная форма делает то же самое и читает более четко рядом с его братьями и сестрами:

<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
<!-- {{ hero_image.id }} holds the attachment ID -->

Теперь привычка, которая отделяет аккуратные виджеты от виджетов с разбитыми значками: пустой страж. Медиа-поле, в котором ничего не выбрано, отображает пустые атрибуты, и <img src=""> отображается как сломанное изображение. Заверните разметку:

{% if hero_image.url %}
<img src="{{ hero_image.url }}" alt="{{ hero_image.alt }}">
{% endif %}

Поле работает и на вкладке CSS. фоновый слот - это одна строка:

.hero-banner {
  background-image: url('{{ hero_image }}');
}

Остерегайтесь альтернативного текста, проходящего нетронутым. {{ hero_image.alt }} печатает все, что медиатека держит, и библиотеки полны изображений с пустыми полями alt.The guard сохраняет атрибут присутствующим, но он не может изобрести текст. виджеты, созданные для клиентов, заслуживают заметки, призывающей редакторов заполнить альтернативный текст в библиотеке.

Используйте управление мультимедиа в Elementor #

Добавьте свой пользовательский виджет на страницу в Elementor, перезагрузив редактор, если страница уже была открыта. поле Media отображается как стандартное поле выбора изображения Elementor под вашей меткой.

Щелкните поле и медиатека WordPress откроется, отфильтрована до установленного типа носителя. Выберите или загрузите файл, подтвердите, и предварительный просмотр обновляется в момент выхода выделения.

Поменять изображение позже - это тот же самый щелчок. Удаление его опустошает значение, что в точности соответствует вашему случаю {% if %} защитные чехлы.

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

• Изображения героев и баннеров, как тег img или фон CSS.
• Аватары и выстрелы в голову в виджетах отзывов и команды.
• Логотипы в виджетах заголовка, нижнего колонтитула и клиентской полосы.
• Миниатюры карт где каждый экземпляр виджета имеет одно изображение.
• Фон декоративного раздела продирать background-image во вкладке CSS.

Советы по работе с Медиа полем #

• Всегда охраняйте с {% if hero_image.url %}. В противном случае поле незадачи отображает пустой src и значок сломанного изображения.
• Распечатайте альт. alt="{{ hero_image.alt }}" ничего не стоит и несет в наценку альтернативный текст библиотеки.
• Используйте прямой токен для фона CSS. url('{{ hero_image }}') сохраняет читабельностью вкладку CSS.
• Установите образ по умолчанию. Виджет, который заглядывает на страницу с настоящей фотографией, продает сам себя, серый заполнитель - нет.
• Фильтр с типом носителя. Если слот является изображением, скажите так, и библиотека не будет предлагать видео.
• Помните, что ярлык доступен только для URL-адресов. Любое свойство, кроме URL-адреса, требует точечной записи; ярлыка для этого нет id или alt.

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

Завершая #

Поле Widget Builder Media - это рабочая лошадка с одним изображением. Выбор библиотеки на панели, ярлык URL-адреса в шаблоне, обозначение точек для id и altи ан {% if %} охранник стоит между вашим виджетом и сломанным значком изображения. Когда одного изображения становится много, перейдите к Галерея поле и его петля. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.