4 ms·
Nice, but wouldn't work for our use case at onefinestay, for two reasons: 1 - We use thumbor for serving our images, so changing the width in the URL isn't eno
by andrewingram 13y ago
Nice, but wouldn't work for our use case at onefinestay, for two reasons:
1 - We use thumbor for serving our images, so changing the width in the URL isn't enough, you also need to change the crop parameters and the anti-tamper signing part.
2 - We actually use different markup in places, some of our homepage slides use 2 or 4 images at desktop sizes, but only 1 at tablet and smaller.
What we're doing is using a modified version of picturefill.js, where we wrap each picture component in another component that controls what widths we load it at.
You can see it in play here: http://www.onefinestay.com/ http://www.onefinestay.com/
- oncletom 13y agoYou should provide the feedback on the Github repository, it will be easier to address a solution for that :-) 1. how do you indicate the crop/anti-tamper in your URL? What is the URL structure of your responsive images? 2. you can finely control how Imager is targeting your images. So you could target different imager configurations for different classnames. Have a look at the examples and let us know if something is missing and not addressing your needs :-)
- andrewingram 13y agoIt would actually be different configurations per image, see this example: http://cropper.onefinestay.com/s3NY9Z5QncGSnphA8QhOStz36wQ=/80x19:4253x2801/fit-in/696x0/filters:quality(85)/https://ofs-media-production.s3.amazonaws.com/media-library/be3c3d92397a3a2af72662c1838885163c48c12f.jpg http://cropper.onefinestay.com/s3NY9Z5QncGSnphA8QhOStz36wQ=/... The segment immediately after the hostname is the signed part, which is generated based on all the other parameters (ie quality, dimensions, crop coordinates and source image url). If you change any part of the URL, the server will return a 404. There's no way of providing a set of client-side rules for how to generate the URLs for the different size images, without leaking our secret key. An option would be for the entire URL to be the configuration, but then all you've achieved is moving the config out of data attributes and into javascript config objects. Essentially, this is what we're doing: https://gist.github.com/AndrewIngram/7871392 https://gist.github.com/AndrewIngram/7871392
- deleted 13y ago[deleted]
- oncletom 13y agoOh that's an interesting approach; glad you coined it :-) Could you create another Gist with how you would see your URL built with Imager? And ping @oncletom in it. Maybe something like ``` http://cropper.onefinestay.com/{secret_key}=/80x19:4253x2801/fit-in/{width}x0/filters:quality({quality})/https://ofs-media-production.s3.amazonaws.com/media-library/be3c3d92397a3a2af72662c1838885163c48c12f.jpg http://cropper.onefinestay.com/{secret_key}=/80x19:4253x2801... ``` Thanks :-)
- jonahx 13y agoyou guys should consider an alternative to the always-down dropdown for arrival dates. it's jarring and felt like i had accidentally clicked on something and then was unable to make it retract. i was unable to shake the gut feeling that something was wrong even after i figured out it was intentional
- andrewingram 13y agoThanks for the feedback, we deliberated over it quite a bit. There were a few who felt that typical horizontal homepage search box was a little overused, and we wanted to do something different. But obviously if it confuses people, that's bad too.
- alphakappa 13y agoI agree with jonahx. It's a bit unsettling when you see it. It's not the fact that there's a form in there, but that it looks like a menu dropdown.
- andrewingram 13y agoIt actually is, on the other pages on the site we hide it by default. The homepage is just an exception to the rule