如何在 Magnolia 5.7 中检测设备并渲染适当的图像变化

Posted 2023-02-16

【中文标题】如何在 Magnolia 5.7 中检测设备并渲染适当的图像变化

【英文标题】：How to detect device and render appropriate image variation in Magnolia 5.7

【发布时间】：2019-11-27 19:36:43

【问题描述】：

到目前为止，我成功地在主题中配置了图像变体，并在 ftl 模板中渲染了一张图像的不同变体

[#assign myAsset = damfn.getAsset("jcr","/futuristic_city_1.jpg")!]
[#if myAsset??]
    <img src="$myAsset.link"/>
    [#assign myThumbnail = damfn.getRendition(myAsset, "240x180")!]
    [#if myThumbnail??]
        <img src="$myThumbnail.getLink()"/>
    [/#if]
[/#if]

我会使用 Device Detection module 来检测传入的请求，但找不到任何指南或示例代码来说明如何在 FTL 模板中使用它来选择适当的图像变体。 第二个问题是，如果内容是使用 ReactJs 组件呈现的（它们的内容加载了从 JCR 检索的 JSON 数据），我应该使用什么

【参考方案1】：

有一个社区模块可以做到这一点。它有一个过滤器，并根据请求尝试检测设备。更多信息：https://documentation.magnolia-cms.com/display/DOCS57/Device+Detection+module

【讨论】：

我已经提到我知道“设备检测模块”但找不到示例。尤其是短语“频道映射到变体。变体由模板和优化内容以在设备上显示的主题组成。”只留下一个问题“如何？”

@AlexeiP 我会删除我的答案，我也不知道你的问题的答案:(

【参考方案2】：

最好和最现代的方法是定义多个图像变体并定义一组响应式图像。

新的 html 标准包括 img-tag 的属性“srcset”：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

在响应式网站中，浏览器将加载最合适的图像