回到所有的课程
课程库

图像领域

使用图像字段上传动态设计和模板页面中的图像。

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

图像字段是a收藏领域允许您和您的合作者上传您的收藏项目的图像,并在您的设计中使用它。集合图像可以作为常规使用图像元素或者一个背景图像收藏页面而且收藏列表

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

  • 作者或团队成员的头像
  • 图标
  • section的背景图像
  • 开放图的图像
在这节课中
  1. 创建一个图像字段
  2. 向图像字段中添加图像
  3. 在您的设计中使用图像字段
  4. 使用图像字段筛选集合列表
  5. 使用图像字段设置条件可见性

创建一个图像字段

可以将图像字段添加到新的或现有的集合中。在“收集设置”中,单击新领域然后选择图像字段。

与任何字段一样,您可以指定该字段是否必需。

向图像字段中添加图像

在CMS中添加图片时,可以拖放图片或单击上传图片。你可以上传任何被接受的图像文件类型

图像的最大文件大小是4MB。在上传时为这些图像创建响应变量。然而,这些变体仅在图像用作图像元素时使用,而不是在背景图像上使用。

在您的设计中使用图像字段

在任何集合列表或集合页面中,可以将图像字段连接到各种元素或样式,以便将集合图像引入到设计中。

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

  1. 添加一个图像元素到收集列表或收集页
  2. 检查得到图像复选框的图像的设置
  3. 从下拉框中选择相关的图像字段

您还可以通过选择元素并单击画布上元素标签旁边的设置图标来访问图像设置,或者通过转到设置面板(D)。

选项可以删除连接得到图像复选框下图像属性。

设置动态alt属性

为这些图片设置一个动态alt文本:

  1. 选择图像
  2. 设置选项卡
  3. 在图像属性下,选中“获取Alt文本:”复选框
  4. 选择包含图像Alt文本的字段。
动态的alt属性

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

您可以将集合图像设置为背景元素a的部分或者一个div块例如,创建博客缩略图或英雄背景图像。设置动态背景图像。

1 -连接背景图像到一个图像字段

  1. 选择一个节
  2. 设置面板(D)
  3. 选择获取BG图像选项
  4. 选择一个图像领域从字段下拉框中

2 -编辑背景图像设置

当将图像字段连接到背景图像时,将应用默认的背景图像设置。要覆盖这些设置:

  1. 在仍然选择相同的部分时,添加一个背景图像在样式面板中
  2. 设置背景图像的大小,位置和平铺设置
任何背景图像在样式面板中此元素上的设置将被用Collection图像覆盖。
任何其他背景样式像渐变或纯色设置在这个元素上将重置动态背景图像的定位。

删除动态背景图像

选项可以删除连接获取BG图像复选框下风格设置集合。

将图像字段连接到Lightbox

  1. 在“收集列表”或“收集页面”中添加一个灯框
  2. 选择灯箱图像占位符
  3. 图像的设置得到从图片相关图像域
  4. 在Lightbox设置中,得到媒体相同的图像字段

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

在某些情况下,您可以选择只显示具有特定图像字段集的集合项的集合列表。例如,您可能希望仅显示具有缩略图图像集的项。这样做:

  1. 选择要筛选的集合列表
  2. 设置面板(D)
  3. 添加一个过滤器收藏列表设置
  4. 在第一个下拉列表中选择相关的图像字段:“Thumbnail image”
  5. 选择设置在第二个领域
  6. 点击保存

你可以在images字段中使用的过滤规则是:

  • 设置-查找具有此图像字段的图像的集合项
  • 没有设置-查找没有此图像字段的图像集的集合项

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

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

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

  1. 选择一个连接到图像字段的图像元素
  2. 设置面板(D)
  3. 添加一个条件(当此元素可见时)有条件的可见性
  4. 在第一个下拉列表中选择您的图像字段
  5. 选择设置在第二个下拉列表中
  6. 点击保存

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

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