7 ms·
BBC-News/Imager.js
- ericcholis 13y agoA 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 https://support.google.com/webmasters/answer/178636?hl=en
- tomelders 13y agoLooking 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.
- kaelig 13y agoBBC 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.
- tomelders 13y agoI 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?
- andrewingram 13y agoNice, 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 :-)
- deleted 13y ago[deleted]
- aytekin 13y agoThere is no live demo on the github site. Here is a nice demo found on google: http://firegoby.com/imager-cssbackgrounds http://firegoby.com/imager-cssbackgrounds
- mk3 13y agoBBC 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.
- deleted 13y ago[deleted]
- tlongren 13y agoSeems like this is posted every few weeks or so.
- deleted 13y ago[deleted]
- trekky1700 13y agoBetween BBC and The Guardian both open sourcing components on the Hacker News homepage, this seems like a good trend. Thank you BBC.
- elwell 13y agoBBC-News team writes great code apparently!