如何在 Timber 中包含 Retina 图像？

Question

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

这是我现在的代码：

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

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

谢谢！

Answer 1

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

您可以查看我创建的宏here。

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

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

如何在 Timber 中包含 Retina 图像？

How to include Retina images in Timber?

timber