어도비 cq5 업로드 된 이미지의 축소판 그림

CQ5에서 맞춤 구성 요소를 만들고 있는데 문제가 있습니다.어도비 cq5 업로드 된 이미지의 축소판 그림

아이디어는 다음과 같습니다 imageItem라는 단락 시스템 사용자 지정 구성 요소에서

추가 할 수 있습니다.
각 ImageItem은 이미지와 미리보기 이미지 (자동 생성 됨)로 구성됩니다.
갤러리 이미지를 galleryitem 구성 요소로 끌어다 놓으려면 첫 번째 탭에서 cq5 smartimage 구성 요소를 사용하고 있습니다.
두 번째 탭에서 드래그 한 이미지의 미리보기 이미지를 표시하려고합니다. (이미지를 리소스로 업로드하는 동안 미리보기 이미지가 자동 생성되고 원본 이미지 URL에 다음 경로를 추가하여 액세스 할 수 있음 : { image_url} .thumb.100.100.jpg)

다음 URL의 이미지를 표시 할 수있는 cq5 구성 요소가 있습니까?

2013-07-16 nikolavas

난 당신이 구성 요소의 대화에서이 모든 일에 대해 얘기하고 있으리라 믿고있어

그냥 smartimage 당신을 제공합니다 위해 xtype 모든 편집 기능을 제공하지 않고 대화 상자에서 이미지를 표시 할 경우, 당신이 당신이 다른 탭에서 smartimage에로드 된 어떤 이미지에 맞게 원하기 때문에 당신이 리스너를 최대로 설정하는 것이 좋습니다,

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

이제 : 당신은에 html 속성 집합으로 label widget을 사용할 수 있습니다 smartimage은을 업데이트합니다. 첫 번째 탭에서 이미지를 변경할 때마다의 HTML이 표시됩니다.

이 경우

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

에서 CRXDE Lite의 목록 구성 요소의 대화를 살펴, 일부 아웃 - 오브 - 박스 대화 청취자의 예를 확인하려면, 당신은 아마 듣고 싶은 것 imagestate 이벤트를합니다 (API docs의 이벤트 섹션에서 발견), 그것은 화재 때이 같은 일을 할 수 있습니다 : thumbnailPreviewLabel이 label 위젯의 이름 속성입니다

function(smartImg) { 
    var dialog = this.findParentByType('dialog'), 
     label = dialog.find('name', 'thumbnailPreviewLabel')[0]; 

    label.update('<img src="' + smartImg.referencedFileInfo.dataPath + '.thumb.100.100.jpg" />'); 
}

이 예제에서는 dialog.xml에서 리스너를 인라인으로 정의하는 것과 같은 몇 가지 단축키를 사용했습니다 (이는 이스케이프 처리 된 HTML 문자 때문에 약간 추한 것입니다. 아마도 별도의 javascript 파일에서 함수를 정의하고 싶을 것입니다. 여기에서 이름으로 사용), 썸네일 서블릿이 나를 위해 작동하지 않았기 때문에 DAM 변환에 대한 원시 경로를 사용했습니다.

<?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

어도비 cq5 업로드 된 이미지의 축소판 그림

답변

관련 문제