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">

非常感谢有关木材中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图像？

1 个答案: