0

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

这个想法是：

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

是否有任何 cq5 组件可以显示以下 url 的这些图像？

4

1 回答 1

1

我假设您正在谈论在组件的对话框中执行所有这些操作 -

如果您只想在对话框中显示图像而不提供 xtypesmartimage为您提供的所有编辑功能，您可以使用属性设置为的标签小部件：html

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

现在，由于您希望它与您smartimage在另一个选项卡上加载的任何图像相匹配，因此您需要在 上设置一个侦听器，以便在您更改第一个选项卡中的图像时smartimage更新您的 html。label

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

/libs/foundation/components/list/dialog/items/list/items/listFrom/listeners

在您的情况下，您可能想要侦听imagestate事件（在API 文档的事件部分中找到），并且当它触发时，您会想要执行以下操作：

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您的小部件的名称属性在哪里label。

对于此示例，我采用了一些快捷方式，例如在 dialog.xml 中内联定义侦听器（由于转义的 HTML 字符，这有点难看 - 您可能希望在单独的 javascript 文件中定义该函数并使用它这里的名称），并且我使用了 DAM 再现的原始路径，因为缩略图 servlet 不适合我。

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Dialog"
    title="Image Thumbnail Preview"
    xtype="dialog">
    <items
        jcr:primaryType="cq:Widget"
        xtype="tabpanel">
        <items jcr:primaryType="cq:WidgetCollection">
            <image
                jcr:primaryType="cq:Widget"
                cropParameter="./imageCrop"
                ddGroups="[media]"
                fileNameParameter="./fileName"
                fileReferenceParameter="./fileReference"
                mapParameter="./imageMap"
                name="./file"
                requestSuffix=".img.png"
                rotateParameter="./imageRotate"
                title="Image"
                xtype="html5smartimage">
                <listeners
                    jcr:primaryType="nt:unstructured"
                    imagestate="function(smartImg) { this.findParentByType('dialog').find('name', 'thumbnailPreviewLabel')[0].update('&lt;img src=&quot;' + smartImg.referencedFileInfo.dataPath + '/jcr:content/renditions/cq5dam.thumbnail.140.100.png&quot; /&gt;'); }"/>
            </image>
            <preview
                jcr:primaryType="cq:Widget"
                anchor="100%"
                title="Image Thumbnail Preview"
                xtype="panel">
                <items jcr:primaryType="cq:WidgetCollection">
                    <thumbnail
                        jcr:primaryType="cq:Widget"
                        name="thumbnailPreviewLabel"
                        html=""
                        xtype="label"/>
                </items>
            </preview>
        </items>
    </items>
</jcr:root>
于 2013-07-17T14:32:07.180 回答