核心组件图像组件是一个自适应图像组件,具备就地编辑的功能。
图像组件具有面向页面访客的自适应图像选择功能和带延迟加载的响应式行为,还具有面向内容作者的轻松图像放置和裁切功能。
模板作者可以在“设计”对话框中定义图像宽度以及裁切和其他设置。内容编辑者可以在“配置”对话框中上传或选择资源,并在“编辑”对话框中裁切图像。为了增加便利性,还可以简单地就地修改图像。
本文档介绍了图像组件 v2,此版本随 2018 年 1 月的核心组件发行版本 2.0.0 的发布引入。
本文档介绍了图像组件 v1。
有关当前版本的图像组件的详细信息,请参阅图像组件文档。
图像组件提供了可靠的响应式功能,可以直接使用。在页面模板级别,可以使用“设计”对话框来定义图像资源的默认宽度。然后,图像组件将自动加载正确的宽度,以根据浏览器窗口的大小进行显示。在窗口调整大小时,图像组件即时动态加载正确的图像大小。组件开发人员无需担心自定义媒体查询的定义方式,因为图像组件已经针对加载内容进行了优化。
此外,图像组件支持延迟加载,可以将实际图像资源的加载推迟到在浏览器中可见时,从而提升了页面的响应能力。
图像组件由自适应图像 Servlet 提供支持。 有关其工作原理的详细信息,请参阅自适应图像 Servlet。
图像组件(截止 发行版本 2.13.0)支持 Dynamic Media 资源。在启用时,这些功能提供了一种能力,即通过简单的拖放功能或者通过资源浏览器,就可以像对任何其他图像一样加载 Dynamic Media 图像资源。此外还支持图像修饰符、图像预设和智能裁切。
使用核心组件构建的 Web 体验现在具备丰富、支持 Sensei、可靠、高性能、跨平台的 Dynamic Media 图像功能。
图像组件支持可缩放矢量图 (SVG)。
为安全起见,图像编辑器从不直接调用原始 SVG。通过 <img src=“path-to-component”>
调用它。这可以防止浏览器执行在 SVG 文件中嵌入的任何脚本。
要体验图像组件并查看其配置选项示例以及 HTML 和 JSON 输出,请访问组件库。
在 GitHub 上可找到有关图像组件的最新技术文档。
在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。
图像组件支持 schema.org 微数据。
除了标准“编辑”对话框和“设计”对话框之外,图像组件还提供了一个“配置”对话框,其中定义了图像本身及其描述和基本属性。
&
分隔。dc:description
元数据的值填充图像的替换文本。dc:title
元数据的值填充图像的题注文本。智能裁切和图像预设为互斥选项。如果作者需要使用图像预设以及智能裁切再现,该作者必须使用图像修饰符来手动添加预设。
利用“编辑”对话框,内容作者可以裁切、修改启动地图和缩放图像。
裁切、旋转和缩放功能不适用于 Dynamic Media 资源。如果启用了 Dynamic Media 功能,对 Dynamic Media 资源进行的任何此类编辑应该通过“配置”对话框进行。
开始裁切
选择此选项将打开一个预定义裁切比例的下拉菜单。
选择一个裁切选项后,可使用蓝色手柄调整图像上的裁切大小。
向右旋转
使用此选项可将图像向右(顺时针)旋转 90°。
水平翻转
使用此选项可水平翻转图像或者将图像沿 y 轴旋转 180°。
垂直翻转
使用此选项可垂直翻转图像或者将图像沿 x 轴旋转 180°。
重置缩放
如果图像已缩放,使用此选项可重置缩放级别。
打开缩放滑块
使用此选项可显示用于控制图像的缩放级别的滑块。
就地编辑器也可以用于修改图像。由于有空间限制,因此仅将基本选项排成一行。对于完整的编辑选项,请使用全屏模式。
GIF 图像不支持图像编辑操作(裁切、翻转、旋转)。在编辑模式下对 GIF 所做的任何此类更改都不会保留。
利用“设计”对话框,模板作者可以在使用此组件时定义内容作者的裁切、上传和轮换上传选项。
在主选项卡上,您可以定义图像的宽度(以像素为单位),组件将根据浏览器的大小自动加载最合适的宽度。这是图像组件的响应式功能的重要组成部分。
此外,您可以定义在作者将组件添加到页面时,自动禁用哪些常规组件选项。
查看文档自适应图像 Servlet 以了解通过仔细定义宽度来优化演绎版选择的提示。
在功能选项卡上,您可以定义在使用组件时可供内容作者使用的选项,包括上传选项、方向和裁切选项。
来源
选择允许从文件系统上传资源选项可允许内容作者从其本地计算机上传图像。要强制内容作者仅从 AEM 中选择资源,请取消选择此选项。
方向
旋转
使用此选项可允许内容作者使用
向右旋转选项。
翻转
使用此选项可允许内容作者使用
水平翻转和垂直翻转选项。
默认情况下已禁用翻转选项。启用此选项将在图像组件的“编辑”对话框中显示垂直翻转和水平翻转按钮,但 AEM 当前不支持该功能,并且不会保留使用这些选项所做的任何更改。
裁切
选择允许裁切选项可允许内容作者在“编辑”对话框中裁切组件中的图像。
请注意,在 AEM 中,裁切比例被定义为高宽比。这与常见的宽高比的定义不同,这样做是出于对旧版兼容性的考虑。只要您提供明确的比率名称,内容作者就不会意识到任何差异,因为该名称显示在 UI 中,而不是比率本身。
图像组件支持 AEM 样式系统。
图像组件支持 Adobe 客户端数据层。