如何使用图像预览创建多图像组件在adobe cq5中?

时间:2015-06-10 06:39:30

标签: cq5 aem

我想构建一个用户可以拖放的组件。从内容查找器中删除两个图像。为此,我在对话框中创建了另一个选项卡,但是当我创作组件时,它在两个div中显示第一个选项卡图像。你能否告诉我这里的错误是我的代码。

dialog.xml

<?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"
    activeTab="{Long}0"
    helpPath="en/cq/current/wcm/default_components.html#Image"
    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"/>
        <advanced
            jcr:primaryType="cq:Widget"
            title="Advanced"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <title
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Title"
                    name="./jcr:title"
                    xtype="textfield"/>
                <alt
                    jcr:primaryType="cq:Widget"
                    fieldDescription="(leave empty to use the title defined above)"
                    fieldLabel="Alt Text"
                    name="./alt"
                    xtype="textfield"/>
                <linkURL
                    jcr:primaryType="cq:Widget"
                    fieldDescription="Drop files or pages from the Content Finder"
                    fieldLabel="Link to"
                    name="./linkURL"
                    xtype="pathfield"/>
                <description
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Description"
                    name="./jcr:description"
                    xtype="textarea"/>
                <size
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Size"
                    heightParameter="./height"
                    widthParameter="./width"
                    xtype="sizefield"/>
            </items>
        </advanced>
        <image4
            jcr:primaryType="cq:Widget"
            cropParameter="./image4Crop"
            ddGroups="[media]"
            fileNameParameter="./image4/fileName"
            fileReferenceParameter="./image4/fileReference"
            mapParameter="./imageMap"
            name="./image4/file"
            requestSuffix=".img.png"
            rotateParameter="./image4/imageRotate"
            title="Image"
            xtype="html5smartimage"/>
    </items>
</jcr:root>

image.jsp是

<%@ page import="com.day.cq.commons.Doctype,
    com.day.cq.wcm.api.components.DropTarget,
    com.day.cq.wcm.foundation.Image" %><%
%><%@include file="/libs/foundation/global.jsp"%><%
    Image image = new Image(resource);

    //drop target css class = dd prefix + name of the drop target in the edit config
    image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image");
    image.loadStyleData(currentStyle);
    image.setSelector(".img"); // use image script
    image.setDoctype(Doctype.fromRequest(request));

    Image image4 = new Image(resource);

    //drop target css class = dd prefix + name of the drop target in the edit config
    image4.addCssClass(DropTarget.CSS_CLASS_PREFIX + "image4");
    image4.loadStyleData(currentStyle);
    image4.setSelector(".img"); // use image script
    image4.setDoctype(Doctype.fromRequest(request));
    // add design information if not default (i.e. for reference paras)
    if (!currentDesign.equals(resourceDesign)) {
        image.setSuffix(currentDesign.getId());
    }
    String divId = "cq-image-jsp-" + resource.getPath();
    %><div id="<%= divId %>"><% image.draw(out); %></div><%
    %><cq:text property="jcr:description" placeholder="" tagName="small" escapeXml="true"/>
    <div id="<%= divId %>"><% image4.draw(out); %></div>
    <%@include file="/libs/foundation/components/image/tracking-js.jsp"%>

1 个答案:

答案 0 :(得分:0)

我在对话框中使用多个图像遇到了这样的问题。在CRXDE中保存图像后,可以检查resourceType,以确保它们都设置了resourceType属性。如果任何一个图像缺少此属性,您可以使用隐藏的窗口小部件添加该属性。参考https://forums.adobe.com/message/4623838了解更多

                    <resType1
                        jcr:primaryType="cq:Widget"
                        ignoreData="{Boolean}true"
                        name="./file/sling:resourceType"
                        value="foundation/components/image"
                        xtype="hidden"/>
                    <resType2
                        jcr:primaryType="cq:Widget"
                        ignoreData="{Boolean}true"
                        name="./image4/sling:resourceType"
                        value="foundation/components/image"
                        xtype="hidden"/>