画廊

的 画廊场 让编辑器一招将整套图像交给您的小部件:打开媒体库,选择十张照片,完成。主插件内部 小部件生成器中,它是投资组合网格、照片墙和旋转木马的字段,任何图像计数属于站点所有者而不是小部件作者的地方。

画廊场地支持 条件 就像每个控件一样,它的图像是通过渲染的 Twig-语法模板引擎的, 相同的引擎, 供电 {% for %} 循环和 {% if %} 检查整个模板。指南都涵盖设置和限制。

因为该值是一个图像数组,所以与 HTML 的连接是一个循环,而不是令牌。 A {% for %} block 每张照片打印您的图像标记一次,按照图库保存它们的顺序。十张照片渲染十个项目。从面板中添加两个,并显示两个项目,模板不会更改。

Gallery 字段的作用 #

• 以多选模式打开 WordPress 媒体库 来自元素面板。
• 存储有序的图像阵列每个都携带它 id 並 url.
• 通过 a 馈送您的模板 {% for %} 循环,每个图像一次迭代。
• 将布局留给您的 CSS:循环打印项目,网格包裹它们。
• 支持默认图像集和动态值式,因此小部件可以预先填充。

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

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder编辑器中打开的自定义小部件,我们的示例是一个摄影作品集小部件,它呈现一个3列网格,每个图库图像一个单元格。

如何添加画廊字段 #

找到 画廊 widget 生成器编辑器左侧面板中的字段,与其他媒体字段分组。

将其拖入下面的一个部分 内容 tab。一旦它落地,该字段的选项会在左侧打开。

画廊字段选项已解释 #

• 标签: elementor 中控件上方显示的文本,例如 “Portfolio Images”。
• 名称: 仅字段、字母、数字和下划线的唯一标识符。例如,您的循环指的是此名称 portfolio_gallery.
• 默认: 一组起始图像,因此网格可以显示小部件掉落的那一刻。
• 动态: 让图像集来自动态源而不是精心挑选的选择。
• 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。

通过循环将图库连接到您的 HTML #

Gallery 没有单值令牌,它的值是一组媒体项目,所以模板将每图像标记包裹在 a 中 {% for %} block, 中继器使用的形状相同:

<div class="portfolio-grid">
  {% for img in portfolio_gallery %}
  <figure class="portfolio-cell">
    <img src="{{ img.url }}">
  </figure>
  {% endfor %}
</div>

• portfolio_gallery 是字段的名称。
• img 是你发明的循环变量;称之为任何东西。
• 每个项目都通过点符号公开其属性: {{ img.url }} 为文件网址, {{ img.id }} 为附件ID。
• 该版块按照画廊的顺序按每张图像打印一次。

空画廊循环零次,这通常是你想要的行为包装纸div仍然渲染,虽然,一个空容器,有填充物或边框显示为神秘的灰色盒子在页面上当一个空画廊应该不留下任何东西时,守卫整个块:

{% if portfolio_gallery %}
<div class="portfolio-grid"> ... </div>
{% endif %}

小心伸手去裸露 {{ portfolio_gallery }} 出于习惯。在快捷方式打印 URL 的媒体字段上;此处的值是图像列表,只有循环到达它们。如果您的网格在面板清楚地保存照片时呈现为空,则缺失 {% for %} 几乎总是为什么。

Layout 停留在 CSS 选项卡中。网格容器,例如 grid-template-columns: repeat(3, 1fr) 无论循环产生多少个单元格,都需要进行包裹,因此十二张照片可以形成四行,而模板或编辑器都不会考虑它。

在 Elementor 中使用图库控件 #

Elementor 中将自定义小部件添加到页面,如果页面已经打开,则重新加载编辑器 图库字段渲染为标签下的添加图像框,一旦存在当前集合的缩略图。

单击它,媒体库以多选模式打开。选择集合、确认、网格填写预览。重新打开图库可让编辑器添加、删除和重新排序图像,页面在下一个渲染时遵循新顺序。

常见用例 #

• 产品组合和摄影网格、每张图像一个单元格、处理行的 CSS 网格。
• 灯箱系列 其中每个循环项目链接其用于灯箱脚本的全尺寸 URL。
• 图片旋转木马中,循环打印幻灯片,小部件的 JS 选项卡运行该幻灯片。
• 客户标志墙 由网站所有者维护,无需触摸小部件。
• 前后或项目画廊 随着每一份完成的工作,这种情况都会增长。

与画廊领域合作的技巧 #

• 循环就是连接。 没有有用的画廊直接印刷;仅 {% for %}…{% endfor %} 到达图像。
• 用 {{ img.url }} 循环内部。 每个项目都是一个媒体数组,点符号会挑选出 URL 和 ID。
• 让 CSS 拥有布局。 具有固定列的网格吸收任何图像计数;模板保留单个图形块。
• 空时保护包装纸意味着隐形。 {% if portfolio_gallery %} 防止未填充的小部件呈现空容器。
• 导出默认设置。 即使是三张占位符照片也使小部件在第一滴时清晰可见。
• 在面板中重新排序,而不是模板。 该循环遵循图库顺序,因此拖动缩略图并重新排列页面本身。

常见问题 #

包裹起来 #

Widget Builder 画廊字段将小部件转换为站点所有者填写的容器:库中的多选,a {% for %} 模板中的循环,CSS 决定集合的流动方式。对于单图像槽,它的兄弟姐妹 媒体领域 涵盖具有相同点符号规则的英雄、头像和徽标。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。