How to include Retina images in Timber?

问题

I'd really like to improve my website (built with Timber) for Retina displays and browsed through past issues on GitHub as well as the Docs. So I added a srcset and used the retina filter (which is deprecated?) and that retina resizing works quite well, but not really in conjunction with the standard resize filter. Also, I saw that there's an ImageHelper class which provides a retina_resize function/filter(?), but I'm not quite sure how to use it.

This is my code right now:

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

Any tips about the best practices for Retina-ready images in Timber are greatly appreciated :)

Thanks!

回答1:

Best approach is to create a Macro that will generate the HTML markup for you. I use a Macro that takes an image ID and will check the media width and output the appropriate HTML for retina images.

You can view the Macro that I created here.

You would then use the Macro like this to generate the appropriate HTML

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

来源：https://stackoverflow.com/questions/44066458/how-to-include-retina-images-in-timber