retina support for the TimberImageHelper class

[aristath]

This is a suggestion:

Adding retina support to the TimberImageHelper class would be relatively easy...
We'd have to basically create 2 files when we resize an image with width=W and Height=H:

1. file-nameWxH.png (already handled)
2. file-nameWxH@2x.png

The 2nd file would then have a resolution of 2Wx2H instead of WxH.

opinions?

[jarednova]

I agree this is a path to go. is the @2x naming convention still the standard?

[aristath]

Yes, it is... But we could take this a step further and add 3 options in the global configuration, or using a filter:

• enable/disable retina (boolean)
• retina multiplier (int)
• retina suffix (string)

This way we can be ready for whatever comes our way. Retina in 2 years may be 4x and not 2x, so why limit ourselves! :)

[jarednova]

Agreed, I don't think 2x is the end-of-the-line on this one. In terms of the interaction, the resize filter already has a bunch of parameters -- rather than append, I'm interested in add a fresh one, for example...

<img src="{{ post.thumbnail.src | resize(600, 400) | retina(2) }}" />

For example, with srcset:

<img src="{{ post.thumbnail.src }}" srcset="{{ post.thumbnail.src | retina(1) }} 1x, 
    {{ post.thumbnail.src | retina(2) }}  2x, 
    {{ post.thumbnail.src | retina(3) }}  3x, 
    {{ post.thumbnail.src | retina(4) }}  4x">

... I'm with you on the global config but torn about the way to do it. Right now things are generally set through Timber::$properties, but I'm interested in a way of making that better before just throwing new properties (or filters) in there.

[aristath]

I like it... 👍

[aristath]

I was actually able to do that semi-manually... https://github.com/presscodes/maera-bootstrap/blob/896e0a8da26bd8ef9ca394b7faa73ad72ac7d149/views/single-top.twig
I had not thought of using scrset!

Though having this happen behind the scenes in Timber would make it a lot easier 😉

[jarednova]

Hey @aristath -- I've got a branch with all the magic built-right-in:

https://github.com/jarednova/timber/tree/371_retina

You can now do...

<img src="{{ post.thumbnail.src | retina }}" />

<img src="{{ post.thumbnail.src | retina(3) }}" />

<img src="{{ post.thumbnail.src | resize(400, 400) | retina }}" />

[aristath]

Seems to be working fine!!

[jarednova]

Awesome! I've thrown a bunch of tests at it and it's working great -- pulling into master....

[jarednova]

closed by #377