画廊字段允许编辑器一次选择一整组图像,以使用主插件构建自定义小部件 小部件生成器。您的模板在集合上循环,每张图像打印一个项目,因此小部件会随着照片数量的增加或减少。将其用于照片网格、作品集墙、徽标行和图像滑块。
Gallery是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.
Gallery 字段的作用 #
- Elementor中为你的小部件面板添加了一个图库框,编辑们一次性从媒体库中选择了几个图片。
- 图像以列表形式存储,按照编辑器排列的顺序。每个图像都有一个
id和一个url. - 您的模板打印列表时带有 a
{% for %}循环。 - Layout 取决于您的 CSS。loop 打印项目,网格或灵活容器会安排它们。
如果您还没有构建小部件,请阅读 小部件生成器概述 首先。
在开始之前 #
- WordPress 已安装并处于活动状态。
- Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
- 媒体库中的一些图像。
- Widget 生成器中打开的小部件,本指南中的示例是一个 “照片网格” 小部件,其中的 Gallery 字段名为
photos.
如何添加画廊字段 #
- 去 主插件 > 小部件生成器 并打开您的小部件。
- 上 内容 tab,添加一个部分,例如“画廊”。
- 类型
gallery在左侧的字段搜索框中。 - 拖动 画廊 into the section。its settings open in the left sidebar。
画廊字段选项已解释 #
- 标签 是elementor中画廊盒子上方的文本,例如“照片”。
- 名字 是字段的唯一ID和你循环的列表,例如
photos。字母,数字和下划线仅。 - 描述 elementor 中出现在控制之下。
- 默认图像 有一个 添加图像 添加占位符插槽的按钮。悬停在插槽上以取下十字架,并使用铅笔为该插槽选择真实图像。
在我们的测试中,默认图像下设置的图像没有传递给 Elementor。小部件的新副本以单个占位符开始,而是将其循环读作两个空项目。下面的模板跳过了这些,因此计划编辑器在将小部件丢弃到页面后添加自己的图像。
常见的设置进一步向下工作,就像在其他字段上所做的那样。
循环浏览模板中的图像 #
画廊是一个列表,所以 {{ photos }} on its own 打印没有任何有用, 在上面循环并打印循环内的每个图像:
{% 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 }}是它的媒体库 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 中使用图库控件 #
Widget 添加到页面,或者如果页面已经打开,则重新加载编辑器。图库框显示选择了多少张图像,每个图像都有一个缩略图。垃圾桶图标清除整个集合。
WordPress 图库窗口中点击缩略图打开, 拖动图片更改顺序, 点击 反向顺序 要翻转它,请使用 添加到画廊 要选择更多图像,请单击图像上的十字将其删除。单击 插入画廊 要保存集合。网格按相同的顺序更新。
常见用例 #
- 照片和产品组合网格。
- 适合客户或合作伙伴的徽标墙。
- 图像滑块,每个图像循环打印一张滑块。
- 卡内设置前后或产品图像。
与画廊领域合作的技巧 #
- 始终将标记包装进去
{% if img.url %}loop 内部,因此一个新的小部件不会显示空图像框。 - 用
aspect-ratio並object-fit: cover所以不同尺寸的照片排列在一起。 - 让 CSS 决定列。网格包裹任意数量的图像,而无需更改模板。
- 添加一个
altattribute。loop 给你图像 ID,如果你需要从另一个字段打印一个标题或 alt 文本。 - 对于一张图像,使用 媒体领域.对于每个都需要自己的文本或链接的图像,使用 中继器场.
常见问题 #
画廊场地免费吗?
No。 Gallery 是 Widget Builder 中的 Pro 字段之一,因此 Master Addons Pro 必须处于活动状态才能将其添加到小部件中。
{{照片}}为什么不打印任何内容?
画廊保存着一个图像列表,因此令牌本身没有什么好打印的。循环使用它 {% for img in photos %} 和打印 {{ img.url }} 循环内部。
为什么新小部件显示空图像框?
在我们的测试中,一个新的小部件以占位符项目开始,循环将其读作两个没有 URL 的条目。添加 {% if img.url %} 在循环内部,这些将被跳过,然后在 Elementor 中添加真实图像。
我的默认图像会出现在 Elementor 中吗?
Not in our tests。come 中设置在构建器中默认图像下的图像没有被使用,所以编辑器需要在元素器中添加图像。
编辑器可以更改图像的顺序吗?
是。Elementor中点击缩略图会打开WordPress图库窗口,图像可以拖动到一个新的顺序或反转。循环遵循该顺序。
包裹起来 #
添加画廊字段,循环使用 {% for %},跳过空项与 {% if img.url %}并且让 CSS 网格处理布局。然后编辑器从 Elementor 中添加、删除图像并重新排序。请参阅 Twig 语法指南 有关更多循环和检查的信息,以及 定价 对于每个计划包含的内容。
