adobe cq5顯示來自上傳的智能圖像的縮略圖

我在CQ5中構建自定義組件，並且遇到了一些問題。adobe cq5顯示來自上傳的智能圖像的縮略圖

的理念是：

在叫imageItem一款系統自定義組件添加。
每個ImageItem由圖像和它的縮略圖（自動生成）組成。
爲了將圖庫圖像拖放到galleryitem組件中，我在第一個選項卡上使用了cq5 smartimage組件。
在第二個選項卡上，我想顯示拖動圖像縮略圖的預覽（表示縮略圖是在將圖像上傳爲資源時自動生成的，並且可以通過將以下路徑添加到原始圖像url中進行訪問：{ image_url} .thumb.100.100.jpg）

是否有任何cq5組件可以顯示以下url的圖像？

2013-07-16 nikolavas

我假設你正在談論做這一切的組件的對話框中 -

如果你只是想顯示在對話框的圖像，而不提供的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>

來源

2013-07-17 14:32:07 mszu

adobe cq5顯示來自上傳的智能圖像的縮略圖

回答

相關問題