adobe cq5显示上传的智能图像的缩略图

Question

我正在CQ5中构建一个自定义组件，我遇到了一些问题。

这个想法是：

• 在段落系统中添加名为imageItem的自定义组件。
• 每个ImageItem由图片和缩略图（自动生成）组成。
• 为了将图库图像拖放到galleryitem组件中，我在第一个选项卡上使用了cq5 smartimage组件。
• 在第二个标签上，我想显示拖动图像缩略图的预览 （说在将图像作为资源上传时会自动生成缩略图，并且可以访问缩略图，将以下路径添加到原始图像网址：{image_url} .thumb.100.100.jpg）

是否有任何cq5组件可以显示以下网址的图像？

Answer 1

我假设你正在谈论在组件对话框中完成所有这些 -

如果您只想在对话框中显示图片而不提供xtype smartimage为您提供的所有编辑功能，则可以使用html属性设置为label widget：

<img src="{your-thumbnail-image-path}" />

现在，由于您希望匹配另一个标签上smartimage中已加载的图像，因此您需要在smartimage上设置一个监听器来更新您的{{1}每当你在第一个标签中更改图像时都会显示HTML。

要查看一些开箱即用的对话框侦听器的示例，请查看CRXDE Lite中列表组件的对话框

label

在您的情况下，您可能希望收听/libs/foundation/components/list/dialog/items/list/items/listFrom/listeners 事件（在API docs的事件部分中找到），当它触发时，您会想要执行此类操作：

imagestate

其中function(smartImg) { var dialog = this.findParentByType('dialog'), label = dialog.find('name', 'thumbnailPreviewLabel')[0]; label.update('<img src="' + smartImg.referencedFileInfo.dataPath + '.thumb.100.100.jpg" />'); } 是thumbnailPreviewLabel小部件的名称属性。

对于这个例子，我采用了一些快捷方式，比如在dialog.xml中定义内联侦听器（由于转义的HTML字符有点难看 - 你可能想要在单独的javascript文件中定义函数而只是在这里按名称使用它），我使用原始路径进行DAM再现，因为缩略图servlet对我不起作用。

label