媒体

的 媒体领域 wordpress媒体库中连接自定义小部件。将字段放入, 并且任何在Elementor中编辑小部件的人都会得到熟悉的图像选择器:单击, 选择或上传, 完成。在主插件内部 小部件生成器,它是英雄图像、头像、徽标以及小部件所需的所有其他单图像插槽背后的字段。

与每个 Widget Builder 字段一样,Media 支持 条件 为面板可见性。它的令牌通过渲染 Twig-语法模板引擎的,它会自动打印文件URL,所以 <img src="{{ photo }}"> just works。两个指南都涵盖了细节。

Media 字段不同,它的值不是一个字符串,它是承载文件的数组 url, id, alt、还有更多,你的模板到达每块都有点符号,有一个友好的快捷方式:打印字段直接给你URL。还有一个习惯值得从第一天开始构建,用一个来守护标记 {% if %} 所以空白的字段不会留下破碎的图像。

媒体领域做什么 #

• 打开 WordPress 媒体库 elementor面板中,上传或从现有文件中进行选择。
• 将选择存储为数组 与 url, id、和 alt 在它的钥匙中。
• URL 打印在直接令牌上: {{ hero_image }} 输出文件 URL 作为快捷方式。
• 通过点符号公开每个属性: {{ hero_image.url }}, {{ hero_image.id }}, {{ hero_image.alt }}.
• 可以按媒体类型过滤库、图像、视频或音频,并支持动态值。

如果您是构建小部件的新手,请从以下内容开始 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个餐厅英雄小部件,具有一个名为的单一媒体字段 hero_image 这填满了横幅。

如何添加媒体字段 #

在 Widget Builder 编辑器中,找到 媒体 左侧面板中的字段,与其他媒体字段分组。

将其拖入下面的一个部分 内容 tab;一个图片就是内容,即使它最终成为css背景,一旦它落地,字段的选项就会在左侧打开。

媒体字段选项解释道 #

• 标签: elementor 中选择器上方显示的文本,例如 “英雄图像”。
• 名称: 例如,字段、字母、数字和下划线的唯一标识符 hero_image.
• 默认: URL 和 ID 对的起始文件,因此小部件会掉到已经看起来已完成的页面上。
• 媒体类型: 过滤库提供的内容、图像、视频或音频,防止编辑器将 mp3 接线到 img 标签中。
• 动态: 让值来自动态源而不是固定选择。
• 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。

将媒体字段连接到您的模板 #

Value 是一个数组,模板规则从中得出,直接令牌是最常见需求的快捷方式:

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

打印数组值直接输出其值 url key, 所以这就渲染了文件URL。显式形式也一样, 在它的兄弟姐妹旁边读得更清楚:

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

现整洁小部件与破碎图标小部件的习惯:空的守卫。没有选择任何内容的媒体字段呈现空属性,并且 <img src=""> show为破碎的图像 包裹标记:

{% 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 }} prints无论媒体库持有什么,库中充满了空alt字段的图像,守卫将属性保留在场,但不能发明文本为客户端构建的小部件值得一个注释,告诉编辑器在库中填充alt文本。

使用 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 %} 站在您的小部件和损坏图像图标之间的防护装置。当一个图像变多时,向上移动到 画廊场 和它的循环。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。