当前所在位置: 首页 » 文档帮助中心 » 图文帮助 » 组件 » 基础组件 » 如何使用图片集组件？

如何使用图片集组件？

浏览数量： 15 作者：本站编辑发布时间： 2016-06-28 来源：本站

图片集组件

【简介】图片集组件是多张图片组成的图片集合，支持矩阵平铺展示、水平对齐展示、纵向对齐展示等多种风格。

【应用场景】一般应用在当有多个同类的图片需要批量展示出来时，用图片集组件比较合适。图片集组件支持每张图片都添加描述文字，描述文字可以固定在图片下方，也可以固定悬浮在图片上、也可以鼠标移到图片上悬浮显示，总有一种展示方式适合您。

【使用方法】

1、如何添加图片集组件？

第一步：找到添加组件入口。把鼠标放到要添加图片集组件的区域，出现小水滴（即添加组件按钮），单击小水滴，弹出“添加组件”弹出框；

找到添加组件按钮

第二步：添加“图片集”组件。在基础组件中，找到“图片集”组件，单击“图片集”，弹出“设置图片集”窗口；

找到图片集组件

2、如何设置图片集组件？

在弹出的设置图片集窗口，可以设置图片集的内容和风格。

内容：

组件标题：根据需要可以输入组件标题，若不输入，标题也不会显示；
模式选择：若选择放大模式，单击图片，图片会放大；若选择链接模式，单击可以跳转到相应的链接页面；
“更多”链接：根据需要，这个页面您可以只放几张有代表性的图片，更多的图片可以引导用户到其它的详情页面去看，就可以在这里加一个链接，中文显示“更多”，英文显示“more”，显示在这个组件区域的右上角位置；
添加图片：首次添加这张图片，需要通过“本地上传”按钮传上来；若之前传过的图片，默认是保存在资料库里的，这种情况也可以通过“从资料库选择”按钮到资料库选择这张图片；

设置图片集内容

每张图片左下角有一个笔形状的按钮，此按钮是编辑按钮，单击此按钮，弹出设置框，可以设置以下内容：

图片Alt属性：默认取图片名称，建议根据推广的内容对每张图片都重新修改此标签，这是搜索引擎对图片识别的唯一标识，因此加了以后对SEO有利。同时若访客网络不好时，图片加载不出来，若加了此标签，用户也可以了解是关于什么的了，因此对用户体验也是有好处的。

描述：可以对图片添加描述，然后通过设置图片描述风格使描述显示在不同的位置；

图片链接：若选择的是链接模式，可以给此图片添加链接，链接类型有很多，比如：站内页面、外部链接、电子邮件、页面锚点、产品分类、文章分类、文件，可以根据需要来选择

编辑图片ALT属性、描述、链接

风格：

展示样式：
矩阵平铺展示：即横平竖直；
水平对齐展示：要求图片高度一致，宽度不一致，这样排列起来错落有致；
纵向对齐展示（瀑布流）：要求图片宽度一致，高度不一致。

设置响应式变化下不同宽度的图片数量：
不同终端的屏幕宽度是一样的，用户可以根据需要”自定义“不同终端下显示的图片数量。
自适应：就是根据图片的宽度自动排版，非通栏的内容区域是1180px的宽度，比如图片都是600px*600px，那可能一行只能排一张图片，一行显示不下2张图片。如果上传一批500*500的图片，可能就会一行显示2张图片的形式排版，因为1180px的宽度一行就只能放2张。
自定义：根据需要自定义不同终端显示的图片数量，宽屏电脑的宽度通常都是>1200px的，笔记本或PAD横屏的宽度通常在961px~1200px，PAD竖屏的宽度通常在741px~960px，手机横屏的宽度通常在500px~740px，手机竖屏的宽度通常<500px。
固定：可以固定单行显示的图片数量，2到5张。无论在哪个终端都是显示同样的数量。

展示样式