26 lines
814 B
HTML
26 lines
814 B
HTML
{% comment %}
|
|
Render your responsive images using Imager.js (https://github.com/BBC-News/Imager.js/), with the smallest resized image used as a fallback.
|
|
|
|
Usage:
|
|
|
|
{% responsive_image path: assets/image.jpg alt: "A description of the image" %}
|
|
|
|
(P.S. You can safely delete this comment block)
|
|
{% endcomment %}
|
|
|
|
{% assign smallest = resized | sort: 'width' | first %}
|
|
|
|
<div class="responsive-image">
|
|
<img class="responsive-image__placeholder" src="/{{ smallest.path }}">
|
|
<div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>
|
|
</div>
|
|
|
|
<script>
|
|
new Imager('.responsive-image__delayed', {
|
|
availableWidths: [{{ resized | map: 'width' | join: ', ' }}],
|
|
onImagesReplaced: function() {
|
|
$('.responsive-image__placeholder').hide()
|
|
}
|
|
})
|
|
</script>
|