Alternative content...
The parent container will be the image wrapper. You need to give this the image ratio css class as well (all available ratio's are defined in our master css).
<p class="fb-img-reset-me-container fb-img-ratio-3-2">
<img src="//img.static-afkl.com/app/sa/997-1-l.jpg " title="FB" class="js-fb-img fb-img-native" data-img-type="native" srcset="//img.static-afkl.com/app/sa/997-1-s.jpg 480w, //img.static-afkl.com/app/sa/997-1-l.jpg 1x, //img.static-afkl.com/app/sa/997-1-m.jpg 480w 2x, //img.static-afkl.com/app/sa/997-1-l.jpg 768w 2x, //img.static-afkl.com/app/sa/997-1-xl.jpg 2x">
</p>
You can also lazy load an image. When giving the data attribute 'data-img-type' the value 'lazy' it will only load the correct image when the container is in viewport of the user. If not, it will always load the correct image. You can optionally have alternative content in the container. As soon as JavaScript kicks in it will be replaced.
<p>
<span data-srcset="http://dummyimage.com/480x270/000/fff.png 480w, http://dummyimage.com/800x450/000/fff.png 768w, http://dummyimage.com/960x540/000/fff.png 1x, http://dummyimage.com/960x540/000/fff.png 480w 2x, http://dummyimage.com/1280x720/000/fff.png 2x" class="js-fb-img fb-img-lazy fb-img-ratio-16-9" data-img-type="lazy"></span>
</p>
You can start the module by requiring it and give it the container the images are in (or leave it blank so module will look in whole document), and overrule the threshold for loading lazy images.
<script>
require(["fb/img-responsive"], function ($Image) {
$Image.init({container: '#docs-img-example', threshold: 300});
});
</script>
After initiated you can use:
$image.crawl({container: 'selector-view'}); when you added new containers.
$image.clean({container: 'selector-view-you-want-to-be-cleaned'}); to clean up (when SPA no detached state will be there).
var img = $image.html('//foo.png 480w, //bar.png 768w, //shizzle.png 1x', 'dummy-class'); to give you the right image html tag (when you need it in your _.template and don't want to crawl for it).