Question

使用Adobe Experience Manager 5.6.1（AEM）（以前称为CQ5）我正在尝试创建一个类似于“页面属性”中“图像”选项卡的新选项卡。它将标题为“徽标”。

我基本上只是复制了“图像”选项卡以创建徽标选项卡，并重命名路径以反映徽标的用途。例如，我将fileReferenceParamater设置为./logo/fileReference，将requestSuffix设置为/logo.img.png。

当我编辑属性时，我可以像使用“图像”选项卡一样将图像拖到选项卡中，但是，图像永远不会出现在那里。我猜这是因为默认图像处理程序没有提取请求。错误是：

无法提出请求 /content/my-site/home-page/en_us/jcr:content/logo.img.png in org.apache.sling.servlets.get.DefaultGetServlet

当我查看内容节点时，没有sling:resourceType。当我添加资源类型foundation/components/adaptiveimage时，它就起作用了。但是，我注意到“图像”节点没有sling:resourceType。我想基础页面中的img.png.java servlet正在处理该请求。

我尝试在我的页面组件中创建一个logo.img.png.jsp文件来处理请求，但这似乎不起作用。

如何让AEM添加sling:resourceType或处理请求？

Answer 1

我遇到了类似的问题，我找到了一种更简单的解决方法。您只需在hidden图片下添加logo xtype，如下所示：

<yourlogo
    jcr:primaryType="cq:Widget"
    <-- other properties -->
    xtype="html5smartimage">

    <items jcr:primaryType="cq:WidgetCollection">
        <resType
            jcr:primaryType="cq:Widget"
            ignoreData="{Boolean}true"
            name="./logo/sling:resourceType"
            value="foundation/components/image"
            xtype="hidden"/>
    </items>

</yourlogo>

Answer 2

好吧，经过一段时间的实验，这就是我最终要做的就是让它发挥作用。如果有更简单的方法，我很乐意知道。

首先，我复制了/libs/foundation/components/page/img.png.java文件并将其添加到我编译的软件包中并进行了一些修改。

@SlingServlet(
        resourceTypes = "sling/servlet/default",
        selectors = "imgnode",
        extensions = {"png","jpg","jpeg","gif"},
        methods = "GET"
)
public class SimpleImageServlet extends AbstractImageServlet {

img.png.java的位置如下：

Image image = new Image(c.resource, "image");

我把它改为：

Image image = new Image(c.resource);

这依赖于SCR注释来生成OSGi配置，以便该servlet将处理具有imgnode选择器的图像请求。它不是寻找子image节点，而是希望当前资源是图像。

第二次，我在页面组件的body.jsp叠加层中添加了一个组件，就像这样。

<cq:include path="logo" resourceType="/apps/my-site/components/logo" />

这会将徽标路径映射到要渲染的组件。

第三次，在组件的logo.jsp中，我将选择器设置为imgnode而不是img。

Image img = new Image(resourcePage, "logo");
img.setSelector("imgnode");

我相信如果覆盖自适应图像，这一步将是相似的。您只需要呈现包含imgnode选择器的网址。

第四，我在页面属性中设置徽标图像对话框选项卡以使用预期的requestSuffix，并将其他属性设置为指向徽标子节点。

示例：

requestSuffix = "/logo.imgnode.png"
fileReferenceParameter = "./logo/fileReference"

第五，我确保/apps/my-site/components/logo组件的图片对话框标签指向了自己。

示例：

requestSuffix = ".imgnode.png"
fileReferenceParameter = "./fileReference"

现在无论是在页面属性，组件编辑还是最终渲染中，都可以正确处理图像。

Answer 3

使用图像窗口小部件控件有点麻烦 - 只有图像组件很好地处理数据，处理“.img”的servlet与图像组件resourceType绑定。

最简单的方法是使用fileReference属性的值，而不是将图像作为页面的一部分引用。因为您使用的是DAM资产，所以这是一种合理的方法。

这并未解决用户直接上传图片的问题。我想建议使用像“./logo/sling:resourceType”这样的隐藏字段，但在尝试保存对话框时在本地测试会导致错误。

另一种方法如下：

<sling:include resourceType="foundation/components/adaptiveimage" resource="${resource.path}/logo" />

（假设resource是jcr：content）。这实际上与添加sling：resourceType相同，但至少有两个缺点：

该图像在该点处变为可授权而不是在对话框中
此方法仅适用于呈现普通标记。它不适用于任何背景图像

页面属性中的AEM页面图像不应用sling：resourceType

3 个答案: