timber - 如何在 Timber 中包含 Retina 图像？

Question

我真的很想改进我的网站（用 Timber 构建）以显示 Retina 并浏览 GitHub 上的过去问题以及 Docs。所以我添加了一个 srcset 并使用了视网膜过滤器（已弃用？），视网膜调整大小效果很好，但并没有真正与标准调整大小过滤器结合使用。另外，我看到有一个 ImageHelper 类，它提供了一个retina_resize函数/过滤器（？），但我不太确定如何使用它。

这是我现在的代码：

<img srcset="{{ TimberImage(image).src | resize(208) | retina(1) }} 1x, {{ TimberImage(image).src | retina(2) | resize(416) | retina(2) }} 2x">

非常感谢有关 Timber 中支持 Retina 的图像的最佳实践的任何提示:)

谢谢！

Answer 1

最好的方法是创建一个将为您生成 HTML 标记的宏。我使用一个带有图像 ID 的宏，它将检查媒体宽度并为视网膜图像输出适当的 HTML。

您可以在此处查看我创建的宏。

然后，您将使用这样的宏来生成适当的 HTML

{% import '_macros/_img.twig' as m_img %}
{{m_img.fixed(imageId, 50, {alt: 'post thumbnail', class: 'fixed'})}}