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

问题描述：

我在CQ5中构建自定义组件，并且遇到了一些问题。adobe cq5显示来自上传的智能图像的缩略图

的理念是：

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

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

答

我假设你正在谈论做这一切的组件的对话框中 -

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

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

，因为你想，要匹配你在你的smartimage加载的其他选项卡上的任何图像，你要建立一个监听器smartimage更新您的label的HTML，只要你改变第一个标签中的图像。

要看到一些外的开箱对话框听众的例子，看看名单组件在CRXDE精简版的对话框，在

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

在你的情况，你可能会想要听为imagestate事件（在API docs的事件部分中找到），以及火灾时，你会想要做这样的事情：

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插件的name属性。

对于这个例子，我采取了一些快捷方式，如在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>

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

相关推荐