0

CQ5 でカスタム コンポーネントを作成していますが、いくつかの問題に直面しました。

アイデアは次のとおりです。

  • imageItem追加するために呼び出される段落システムのカスタム コンポーネント。
  • それぞれImageItemが画像とサムネイル(自動生成)で構成されています。
  • ギャラリー イメージをgalleryitemコンポーネントにドラッグ アンド ドロップするために、最初のタブで cq5 smartimage コンポーネントを使用しています。
  • 2 番目のタブでは、ドラッグした画像のサムネイルのプレビューを表示したいと思います (リソースとして画像をアップロードするときにサムネイルが自動生成され、元の画像 URL に次のパスを追加してアクセスできると言っています: {image_url}.thumb .100.100.jpg)

次の URL の画像を表示できる cq5 コンポーネントはありますか?

4

1 に答える 1

1

コンポーネントのダイアログ内でこれらすべてを行うことについて話していると思います-

xtype が提供するすべての編集機能を提供せずに、ダイアログに画像を表示するだけの場合は、プロパティを次のように設定してラベル ウィジェットsmartimageを使用できます。html

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

ここで、他のタブでロードした画像と一致させる必要があるため、最初のタブで画像を変更するたびに の htmlを更新するようsmartimageに、 でリスナーを設定する必要があります。smartimagelabel

すぐに使用できるダイアログ リスナーの例を確認するには、CRXDE Lite のリスト コンポーネントのダイアログを参照してください。

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

あなたの場合、おそらくイベントをリッスンしたいと思うでしょう( API docsimagestateの events セクションにあります)。

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の name 属性はどこにありますか。label

この例では、dialog.xml でリスナーをインラインで定義するなど、いくつかのショートカットを使用しました (HTML 文字がエスケープされているため、これは少し見にくいです。別の JavaScript ファイルで関数を定義し、次のように使用することをお勧めします)。サムネール サーブレットが機能しなかったため、DAM レンディションへの raw パスを使用しました。

<?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 に答える