如何在木材中包含Retina图像？

Question

我真的很想改进我的网站(用木材构建)的Retina显示和浏览过去的问题，在GitHub以及文档。因此，我添加了一个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就绪图像的最佳实践的提示都是非常感谢的:)

谢谢!

Answer 1

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

您可以查看我创建的这里的宏。

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

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