jsp - Adobe cq 5.5 具有拖放图像功能的对话框

Question

我一直致力于 Adob​​e CQ5.5 自定义组件的开发。我面临的问题是在对话框中添加多个拖放图像以映射到 jcr 内容。

Answer 1

听起来您正试图在一个组件对话框中拥有两个图像选项卡。最简单的方法是使用 CRXDE lite 将图像节点从 /libs/foundation/components/page/dialog/items/tabs/items/image 复制到您的对话框中。

但是有一个问题。如果您尝试将两个图像放在一个组件对话框中，您会注意到该对话框无法正确显示其中一个图像（可能是任何未命名为“图像”的图像）。除了默认图像之外，我还遇到了添加页面缩略图图像的问题。

这种不当行为有两个原因。首先，第二张图片的 requestSuffix 属性必须与第一张不同。您会认为这足以解决问题，而且应该如此，但由于某种原因，CQ 不会在（这些特定的）图像内容节点上创建 sling:resourceType 属性，因此请求仍然无法正确解决在对话框中。在名为“image”的节点的情况下，它似乎被正确推断，但在任何其他情况下都没有。这意味着您必须手动添加此属性：

sling:resourceType=foundation/components/image

到第二个图像的内容节点。同样，您还需要将图像对话框属性中的 requestSuffix 属性的值更改为其他值，例如：“/thumbnail.img.png”。缩略图开头的斜线也是必需的。（默认值是“.img.png”——默认图像组件似乎得到了特殊处理，所以这不是一个明显的修复）

Answer 2

使用以下代码扩展Image 组件 (/libs/foundation/components/image) 中的dialog.xml以在编辑对话框中正确显示第二个图像：

    <image
        jcr:primaryType="cq:Widget"
        cropParameter="./imageCrop"
        ddGroups="[media]"
        fileNameParameter="./fileName"
        fileReferenceParameter="./fileReference"
        mapParameter="./imageMap"
        name="./file"
        requestSuffix=".img.png"
        rotateParameter="./imageRotate"
        title="Thumbnail"
        xtype="html5smartimage"/>
    <thumb
        jcr:primaryType="cq:Widget"
        cropParameter="./thumbImageCrop"
        ddGroups="[media]"
        fileNameParameter="./thumbFileName"
        fileReferenceParameter="./thumbFileReference"
        mapParameter="./thumbImageMap"
        name="./thumb"
        requestSuffix="/thumb.img.png"
        rotateParameter="./thumbImageRotate"
        title="Image"
        xtype="html5smartimage"/>