BBC-News/Imager.js | Hacker News Reader

BBC-News/Imager.js

github.com

109 pointsanu_gupta19 comments

There is no live demo on the github site. Here is a nice demo found on google: http://firegoby.com/imager-cssbackgrounds

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/

You 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 :-)

It would actually be different configurations per image, see this example:

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

Oh 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... ```

Thanks :-)

you 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

Thanks 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.

I 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.

It actually is, on the other pages on the site we hide it by default. The homepage is just an exception to the rule

BBC uses name of already existing npm package for their install instructions. And in issues one of the programmers I suppose suggests asking to madhums to rename original library :) Strange line of thought.

that's strange indeed. Not to mention the npm 'imager' is widely used in production.

Yes that's something that has been overlooked and which is going to be sorted. It will mostly be `imager-js` in npm and bower registries.

Looking through their resources the important images are all Jpegs, so I would have thought the overly compressed JPEG@2x solution would work for them. I also see a few individual PNGs, some of them individual icons, the other sprite sheets. Perhaps they'd be better off using webfonts for icons, or Base64 encoding images into the sprite sheets with SASS.

My gut feeling is that this solution might be more complicated than the problem.

BBC News does use webfonts for icons. The examples you see on the Imager.js Github repository are not exactly what BBC News uses in production, consider those as guidelines for using the plugin.

I was looking at the resources on the actual BBC news website. My point being, I wonder if the BEEB might be better off using webfonts for icons since every other image can be a jpeg. And if it can be a JPEG, the aggressive compression technique might be a better approach since it doesn't require any JS or additional HTTP connections.

Are you saying that the BEEB has a policy of not using web fonts? If so, why?

A nice solution, but it still leaves me wanting a more native option. Word of warning, if you implement this, be sure to have a good image sitemap for search engines to digest.

Image Sitemap Schema: https://support.google.com/webmasters/answer/178636?hl=en

Between BBC and The Guardian both open sourcing components on the Hacker News homepage, this seems like a good trend. Thank you BBC.

Seems like this is posted every few weeks or so.

BBC-News team writes great code apparently!

Reply on news.ycombinator.com