媒体

Media 字段将图像选择器添加到使用主插件构建的自定义小部件中 小部件生成器。编辑从媒体库中选择图片或在 Elementor 中上传新图片, 您的模板会打印其 URL、ID 或 alt 文本。将其用于个人资料照片、徽标、英雄图片、产品照片和任何其他单个图像插槽。

Media是免费版的小部件生成器中可以使用的字段之一,免费插件包含有限的小部件生成器,全套字段自带 硕士插件专业版.

媒体领域做什么 #

• 它通过"选择图像"按钮将 Elementor 的图像框添加到小部件的面板中。
• 选择图像会打开 WordPress 媒体窗口,编辑器可以在其中上传文件、从媒体库中选择一个文件或从 URL 中插入一个文件。
• 该字段存储图像 url, id 並 alt 文本,您的模板会打印任何需要的内容。
• HTML 选项卡和 CSS 选项卡中工作,例如作为背景图像。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。

在开始之前 #

• WordPress 已安装并处于活动状态。
• 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
• Widget 生成器中打开的小部件,本指南中的示例是一个 “配置文件卡” 小部件,其媒体字段名为 profile_photo 以及名称的文本字段。

如何添加媒体字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 上 内容 tab,添加一个部分,例如“配置文件”。
3. 类型 media 在左侧的字段搜索框中。
4. 拖动 媒体 into the section。its settings open in the left sidebar。

媒体字段选项解释道 #

• 标签 是 Elementor 中图像框上方的文本,例如 “Profile Photo”。
• 名字 是该字段的唯一ID及其令牌的开头,所以 profile_photo 给出 {{ profile_photo.url }}。字母,数字和下划线仅。
• 描述 elementor 中的图像框下方显示。
• 媒体类型 列(默认值)图像、视频、音频、PDF、SVG、电子表格、文档、演示文稿和存档,在我们的测试中,此设置没有达到 Elementor。设置为视频的字段仍然显示为正常的图像选择器,因此将媒体字段视为图像字段。

没有默认图像设置,因此小部件的新副本从没有图像开始,直到编辑器选择一个。常见的设置进一步向下工作,就像在其他字段上一样。

在模板中打印图像 #

该字段包含多个值,并且您用点打印每个值:

• {{ profile_photo.url }} 是图像文件URL。 {{ profile_photo }} 在其自身上打印相同的 URL。
• {{ profile_photo.id }} 是图像的媒体库 ID。
• {{ profile_photo.alt }} 是编辑选择图像时媒体库中的替代文本。

包裹 <img> tag 在支票中, 所以没有打印任何内容, 而字段是空的:

{% if profile_photo.url %}
  <img class="profile-photo" src="{{ profile_photo.url }}" alt="{{ profile_photo.alt }}">
{% endif %}

CSS 选项卡中也可使用令牌, 例如对于背景图像:

.profile-card {
  background-image: url('{{ profile_photo }}');
}

如果您的图像样式不适用,请使选择器更加具体。Elementor 对小部件内的图像有自己的规则,并且在我们的测试中 .profile-photo 独自一人没有战胜他们,而 .profile-card .profile-photo 做到了。

单击 保存设置 当你完成后。

使用 Elementor 中的媒体控制 #

Widget 添加到页面,或者页面已经打开时重新加载编辑器,图片框显示当前图片,悬停在上面点击 选择图像 要更改它,或使用垃圾桶图标来清除它。

"插入媒体"窗口打开。在下面的上传文件 上传文件,选一个下面 媒体库的,或者使用 从 URL 插入.右侧的细节面板显示图像的 Alt Text,这是什么 {{ profile_photo.alt }} prints。在你点击之前先把它填进去 选择.

常见用例 #

• 个人资料照片和团队成员卡。
• 标头、页脚和客户端列表中的徽标。
• 英雄和横幅图像,作为一个 <img> 标签或 CSS 背景。
• 卡片内的产品或功能图像。

与媒体领域合作的技巧 #

• 始终守卫 <img> 标记为 {% if profile_photo.url %} 所以空场不会留下破碎的图像。
• 打印 {{ profile_photo.alt }} alt属性中,并在选择图像之前在媒体库中添加alt文本。
• 用 object-fit: cover 当不同形状的图像需要对齐时,具有固定的宽度和高度。
• 给图像规则两个类,例如 .profile-card .profile-photo的,所以elementor自己的图像样式不会覆盖它们。
• 对于多个图像,请使用 画廊场.对于图标或SVG符号,使用 图标字段.

常见问题 #

包裹起来 #

添加媒体字段,打印 {{ field_name.url }} 並 {{ field_name.alt }} 里面有一个 {% if %} check, 并给你的图片样式一个特定的选择器, 然后编辑器直接从 Elementor 中挑选或上传图片, 要与图片相连的链接, 请添加一个 URL 字段,并检查 定价 对于每个计划包含的内容。