Skip to content

Instantly share code, notes, and snippets.

@ashukasma
Forked from mnuno10/Change Image By Size
Last active April 11, 2017 17:05
Show Gist options
  • Save ashukasma/f7d7bf5fd95ffc76f2be727e9d275cf8 to your computer and use it in GitHub Desktop.
Save ashukasma/f7d7bf5fd95ffc76f2be727e9d275cf8 to your computer and use it in GitHub Desktop.
Shopify
<picture>
<source media="(max-width: 480px)" srcset="{{ home_slideshow_large_image | asset_url }} 1x, {{ 'slideshow_1_1024x1024.jpg' | asset_url }} 2x">
<source media="(max-width: 640px)" srcset="{{ home_slideshow_grande_image | asset_url }} 1x, {{ 'slideshow_1_1024x1024.jpg' | asset_url }} 2x">
<source media="(max-width: 1024px)" srcset="{{ home_slideshow_1024_image | asset_url }} 1x, {{ 'slideshow_1.jpg' | asset_url }} 2x">
<img src="{% comment %}ly_asset_replace_for_[ home_slideshow_image | asset_url ]_begin{% endcomment %}{% assign ly_asset = home_slideshow_image %}{% include 'ly-asset' with ly_asset %}{{ ly_translation }}{% comment %}ly_asset_replace_end{% endcomment %}" alt="">
</picture>
$(function(){
var resolution = "low_resolution";
var width = $(window).width();
if (window.devicePixelRatio > 1 && width <= 740) {
resolution = "standard_resolution";
} else if (window.devicePixelRatio <= 1 && width < 1220 && width > 740) {
resolution = "thumbnail";
}
var userFeed = new Instafeed({
get: 'user',
userId: {{ settings.instagram-user-id }},
accessToken: '{{ settings.instagram-access-token }}',
resolution: resolution,
template: '<a class="fancybox desktop-2 tablet-1 mobile-half padded" href="{{url}}" rel="ig" title="{{ caption }}"><img class="instagram-image" src="{{ url }}" /></a>'
});
userFeed.run();
});
$('#homepage_slider li img').each(function() {
var img_src_full = $(this).attr('data-src-full');
var img_src_1024 = $(this).attr('data-src-1024');
var img_src_grande = $(this).attr('data-src-grande');
var img_src_large = $(this).attr('data-src-large');
var viewport_width = $(window).width();
var img_src = img_src_1024;
if (window.devicePixelRatio > 1) {
if (viewport_width > 640) {
img_src = img_src_full;
}
} else {
if (viewport_width < 481) {
img_src = img_src_large;
} else if (viewport_width < 641) {
img_src = img_src_grande;
} else if (viewport_width > 1024) {
img_src = img_src_full;
}
}
$(this).attr('src', img_src);
$(this).attr('data-src-full', '');
$(this).attr('data-src-1024', '');
$(this).attr('data-src-grande', '');
$(this).attr('data-src-large', '');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment