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

Question

使用 Adob​​e 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 在 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

我遇到了类似的问题，我找到了一种更简单的解决方法。您需要做的就是在您的logo 图像下添加一个hidden 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 选择器的 URL。

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

例子：

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

第五，我确保/apps/my-site/components/logo 组件的图像对话框选项卡指向自身。

例子：

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

现在无论是在页面属性，组件编辑，还是最终渲染中，图像都得到了适当的处理。

Answer 3

使用图像小部件控件有点麻烦——只有图像组件可以很好地处理数据，而处理“.img”的 servlet 与图像组件资源类型相关联。

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

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

另一种方法如下：

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

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

1. 图像在此时变为可创作，而不是在对话框中
2. 此方法仅适用于呈现普通标签。它不适用于任何类型的背景图片