核心组件图像组件是一个自适应图像组件,可进行就地编辑。
图像组件为页面访客提供自适应图像选择和响应式行为功能,为内容作者提供延迟加载以及简单的图像放置和裁剪。
模板作者可以在设计对话框中定义图像宽度以及裁剪和其他设置。 内容编辑器可以上传或选择配置对话框中的资产,并裁剪编辑对话框中的图像。 为了更方便,还可以对图像进行简单的就地修改。
图像组件附带强大的响应式功能,随时可用。 在页面模板级别,设计对话框可用于定义图像资产的默认宽度。 然后,图像组件将自动加载正确的宽度以根据浏览器窗口的大小进行显示。 调整窗口大小时,图像组件会动态加载正确的图像大小。 由于图像组件已经过优化以加载您的内容,因此组件开发人员无需担心定义自定义媒体查询。
此外,图像组件还支持延迟加载,以延迟实际图像资产的加载,直到其在浏览器中可见为止,从而提高页面的响应性。
图像组件(从版本2.13.0开始)支持Dynamic Media资产。 启用后, 这些功能将优惠通过简单的拖放操作或通过资产浏览器添加Dynamic Media图像资产的功能,就像您添加任何其他图像一样。此外,还支持图像修饰符、图像预设和智能裁切。
使用核心组件构建的Web体验不能提供丰富的、由Sensei提供支持、强大、高性能、跨平台的Dynamic Media图像功能。
图像组件的当前版本为v2,2018年1月随核心组件的2.0.0版一起推出,本文档对此进行了说明。
下表详细列出了组件的所有受支持版本、与组件版本兼容的AEM版本以及指向先前版本文档的链接。
组件版本 | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v2 | 兼容 | 兼容 | 兼容 |
v1 | 兼容 | 兼容 | - |
有关核心组件版本和版本的详细信息,请参阅文档核心组件版本。
图像组件支持可缩放矢量图形(SVG)。
出于安全原因,图像编辑器从不直接调用原始SVG。 它通过<img src=“path-to-component”>
调用。 这会阻止浏览器执行嵌入在SVG文件中的任何脚本。
要体验图像组件以及其配置选项以及HTML和JSON输出的示例,请访问组件库。
有关映像组件的最新技术文档可在GitHub上找到。
有关开发核心组件的更多详细信息,请参阅核心组件开发人员文档。
图像组件支持模式.org microdata。
除了标准编辑对话框和设计对话框之外,图像组件还优惠一个配置对话框,其中定义了图像本身及其描述和基本属性。
&
类型, 均可 以定义这些命令。dc:description
据的值。dc:title
数据的值。智能 Crop和图 像预 设是互斥的选项。如果作者需要将图像预设与智能裁剪再现结合使用,则作者必须使用图像修饰符来手动添加预设。
编辑对话框允许内容作者裁剪、修改启动映射和缩放图像。
裁剪、旋转和缩放功能不适用于Dynamic Media资产。 如果Dynamic Media功能处于启用状态,则应通过配置对话框执行对Dynamic Media资产的任何此类编辑。
开始裁剪
选择此选项将打开预定义裁剪比例的下拉框。
选择裁剪选项后,使用蓝色手柄调整图像上的裁剪大小。
向右旋转
使用此选项将图像向右(顺时针)旋转90°。
水平翻转
使用此选项可水平翻转图像或沿y轴将图像旋转180°。
垂直翻转
使用此选项可垂直翻转图像或沿x轴将图像旋转180°。
重置缩放
如果图像已经缩放,则使用此选项重置缩放级别。
打开缩放滑块
使用此选项可显示一个滑块来控制图像的缩放级别。
就地编辑器还可用于修改图像。 由于空间限制,只有基本选项可在线使用。 对于完整编辑选项,请使用全屏模式。
GIF图像不支持图像编辑操作(裁剪、翻转、旋转)。 在编辑模式下对GIF所做的任何此类更改都不会被保留。
设计对话框允许模板作者定义内容作者在使用此组件时具有的裁剪、上传和旋转以及上传选项。
在Main选项卡上,您可以定义图像的宽度列表(以像素为单位),组件将根据浏览器大小自动加载最合适的宽度。 这是图像组件响应功能的重要部分。
此外,您还可以定义在作者将组件添加到页面时自动或禁用的常规组件选项。
在功能选项卡上,您可以定义在使用包含上载选项、方向和裁剪选项的组件时,内容作者可以使用哪些选项。
源
选择选项允许从文件系统上传资产以允许内容作者从其本地计算机上传图像。 要强制内容作者仅从AEM中选择资产,请取消选择此选项。
方向
旋
转使用此选项可允许内容作者使用
旋转 右键。
翻
转使用此选项允许内容作者使用
“水平 翻转”和“ 垂直 翻转”选项。
默认情况下,Flip选项处于禁用状态。 启用此功能,将在图像组件的编辑对话框中显示垂直翻转和水平翻转按钮,但AEM当前不支持此功能,并且不会保留使用这些选项所做的任何更改。
裁剪
选择选项允许裁剪,以允许内容作者在编辑对话框中裁剪组件中的图像。
请注意,在AEM中,裁剪长宽比定义为height/width。 这与常见的宽高比的定义不同,这样做是出于对旧版兼容性的考虑。只要您提供比率的明确名称,内容作者就不会察觉到任何差异,因为该名称显示在UI中,而不是比率本身。
映像组件支持AEM 样式系统。
图像组件使用核心组件的自适应图像Servlet。 自适应图 像服务器负责图像处理和流化,开发人员可以利用它 们自定义核心组件。
通过Last-Modified
头的条件请求受自适应图像Servlet支持,但Last-Modified
头的缓存需要在Dispatcher中启用。
AEM Project Archetype的示例Dispatcher配置已包含此配置。