回到所有的课程
课程库

多映像领域概述

向“集合”项添加多个图像,并将它们连接到“集合”页上的“集合”列表和灯箱媒体。

这个视频的特点是一个旧的UI。更新版本即将发布!

多图像场是一个收藏领域它允许您和您的合作者为您的收藏项目上传多个图像,并在您的设计中使用它们。您可以使用多图像字段来创建动态图像网格和动态灯箱画廊。

目前,这些图像可以作为常规图像使用图像元素,背景图片或者是Lightbox媒体收藏页面

还可以使用多图像字段对集合列表进行筛选,或对集合列表和页面中的元素设置条件可见性。以下是多图像字段的一些常用用法:

  • 相片画廊
  • 欧宝体育在线首页产品缩略图
  • 动态lightbox
在这节课中
  1. 创建一个多图像字段
  2. 添加图像到多图像字段
  3. 在你的设计中使用多图像字段
  4. 使用多图像字段筛选集合列表
  5. 使用多图像字段设置条件可见性

创建一个多图像字段

可以将多图像字段添加到新的或现有的集合中。在“收集设置”中,单击“新字段”,然后选择“多图像字段”。与任何字段一样,您可以指定该字段是否必需。

在集合设置中添加一个多图像字段。

添加图像到多图像字段

若要将图片上传到多图像字段中,可将图片拖放到字段中或单击上传。你可以上传任何被接受的图像文件类型

图像的最大文件大小是4MB。在上传时为这些图像创建响应变量。然而,这些变体仅在图像用作图像元素时使用,而不是在背景图像上使用。
将图像拖放到任何集合项中的“多图像字段”中。

重新排序上载到多图像字段的图像

一旦你的图像被上传,你可以通过在多图像字段中拖动它们来重新排列它们。确保保存该项目以保存新订单。

向多图像字段添加更多图像

您可以向多图像字段添加更多的图像,只要您没有达到每个字段25个图像的限制。

为多图像字段中的图像设置alt文本

您可以在多图像字段中为每个图像指定一个alt文本。这对于SEO和可访问性很重要。您可以从图像菜单中为每张图像添加alt文本,当您将鼠标悬停在每张图像上时,您可以通过单击出现在每张图像上的省略号(…)来访问该菜单。

从多图像字段中删除图像

您还可以从同一菜单的“多图像字段”中删除任何图像。单击省略号(…)并选择删除。

在你的设计中使用多图像字段

通过在该页面上添加集合列表并将其连接到多图像字段,可以在其集合页面上显示多图像字段的图像。

接下来,您可以添加图像元素、div块或灯箱来显示图像。

连接多图像字段到图像元素

  1. 将集合列表添加到集合页面
  2. 将收集列表连接到多图像字段
  3. 添加一个图像元素在收藏清单内
  4. 在“图像设置”中,选择从多图像字段获取图像
  5. 更新集合列表的布局以创建所需的设计

连接多图像字段到背景图像

您可以将多图像字段中的图像设置为背景元素的,如adiv块,裁剪图像并将它们放入特定尺寸或形状的盒子中。使用多图像字段设置动态背景图像:

  1. 将集合列表添加到集合页面
  2. 将收集列表连接到多图像字段
  3. 在集合列表中添加一个div块
  4. 在元素设置面板中,选择从多图像字段中获取BG图像
  5. 在样式面板中,向div块添加背景图像,并根据自己的喜好调整背景图像设置
  6. 在样式面板中,设置div块的大小
  7. 更新集合列表的布局以创建所需的设计

故障处理:如果背景图片看起来不正确:

  1. 确保您已经在元素上添加并设置了背景图像
  2. 确保元素上没有设置其他背景图像或渐变
  3. 确保元素从Multi-image Field中获取图像。检查元素设置面板中的设置。

将多图像字段连接到灯箱

您可以使用多图像字段创建动态灯箱。

  1. 将收集列表添加到包含多图像字段的收集页面上
  2. 将收集列表连接到多图像字段
  3. 添加一个lightbox组件
  4. 在Lightbox设置中,选择从多图像字段获取媒体
  5. 可选:如果您想将灯箱链接在一起,以便在灯箱打开后用户可以浏览所有图像,请在灯箱设置中启用该选项并指定灯箱组名。
  6. 更新集合列表的布局以创建所需的设计。选择以下选项之一来创建图库:

选项1:将灯箱图像占位符链接到多图像字段

在灯箱组件中选择图像元素,在图像设置中,选择从多图像字段中获取图像。

选项2:在Lightbox链接上设置背景图像,并从多图像字段获取图像

  1. 删除灯箱组件中的图像元素
  2. 选择灯箱链接,在元素设置面板中,选择从多图像字段中获取BG图像
  3. 在样式面板中,向div块添加背景图像,并根据自己的喜好调整背景图像设置
  4. 在样式面板中,设置div块的大小

使用多图像字段筛选集合列表

虽然不能筛选连接到多图像字段的集合列表,但可以筛选其他集合列表,以只显示设置了或未设置特定多图像字段的项。

例如,您可以创建“更多照片”的集合列表,其中只显示已在多图像字段中上传图像的项目。

根据是否设置了多图像字段来筛选集合列表:

  1. 选择要筛选的集合列表
  2. 在“元素设置”面板中,在“集合列表设置”下添加筛选器
  3. 在第一个下拉列表中选择相关的多图像字段
  4. 在第二个字段中选择“is set”
  5. 保存过滤

你可以使用多图像字段的过滤规则是:

  • 设置-查找这个多图像字段有图像的集合项
  • 没有设置-查找没有为这个多图像字段设置图像的集合项

了解有关筛选集合列表的更多信息

使用多图像字段设置条件可见性

以同样的方式,可以在Collection List或Page中的任何元素上设置有条件的可见性规则。这将确保只有在为给定集合项设置多图像字段时,这些元素才可见。

您可以使用这个条件可见性来在Collection List中显示“查看相册”文本链接。你也可以用它来显示标题。“这次旅行的照片”),在收集页面上显示这些图片的部分。

  1. 选择只在设置多图像字段时要显示的元素
  2. 在“元素设置”面板中,在“条件可见性”下添加一个条件
  3. 在第一个下拉列表中选择你的Multi-image Field
  4. 在第二个下拉菜单中选择“Is Set”
  5. 保存条件

了解更多关于条件可见性的信息。

提高网页性能的最佳实践

在一个页面上加载太多的图片可能会降低你的页面加载速度。所以,当你每页要调出25张多图片时,一定要优化你的图片上传到CMS或对连接到多图像字段的集合列表进行分页

常见问题

为什么没有连接到多图像字段的集合列表的过滤和排序选项?

此集合列表没有筛选和排序选项,因为它自动显示来自连接的多图像字段的图像,其顺序与您在多图像字段中添加它们的顺序一致。

我可以在连接到集合的集合列表中显示多图像字段数据吗?

是的!了解更多关于嵌套列表集合

我可以导入图像到一个多图像字段使用CSV导入?

方法将多个图像导入到多图像字段中集合导入功能

尝试Webflow——它是免费的
Baidu
map