Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Update to fix the Instagram Section for District—premium Shopify theme http://help.stylehatch.com/article/332-update-to-fix-the-instagram-section-for-district
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function ($) {
var $instagramSection = $('.instagram-collection');
var loadImages = function($container, data, imageCount){
for (var i = 0; i < imageCount; i++) {
var images = data.data[i].images,
// Thumbnail
thumbnail = images.thumbnail.url,
thumbnailWidth = images.thumbnail.width,
// Low Resolution
low_resolution = images.low_resolution.url,
low_resolutionWidth = images.low_resolution.width,
// Standard Resolution
standard_resolution = images.standard_resolution.url,
standard_resolutionWidth = images.standard_resolution.width;
if(window.lazySizes){
var $image = $container.find('.box-' + i + ' .card__image');
$image.replaceWith('<div class="card__image lazyload"></div>');
var $shotImage = $container.find('.box-' + i + ' .card__image');
$shotImage.css({ 'background-size': 'cover' });
$shotImage.attr('data-sizes', 'auto');
$shotImage.attr('data-bgset', thumbnail + ' ' + thumbnailWidth + 'w, ' +
low_resolution + ' ' + low_resolutionWidth + 'w, ' +
standard_resolution + ' ' + standard_resolutionWidth + 'w');
}
if(!window.lazySizes) {
var $image = $container.find('.box:eq(' + i + ') figure img');
var $a = $container.find('.box:eq(' + i + ') figure a');
$a.css({
'padding-top': '100%',
'position': 'relative',
'overflow': 'hidden',
'display': 'block'
});
$image.replaceWith('<div class="card__image lazyload"></div>');
var $shotImage = $container.find('.box:eq(' + i + ') .card__image');
$shotImage.css({
'background-size': 'cover',
'background-image': 'url(' + standard_resolution + ')',
'background-position': 'center',
'display': 'block',
'position': 'absolute',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%'
});
}
}
}
$instagramSection.each(function(i){
var $container = $(this);
// sections
if(window.storeWithExpiration){
var accessToken = $container.data('instagram-access-token'),
imageCount = $container.data('image-count');
var checkImages = setInterval(function(i){
if($container.find('img').length > 0 && storeWithExpiration.get(accessToken) !== null){
clearInterval(checkImages);
var data = storeWithExpiration.get(accessToken);
if(imageCount > data.data.length) {
imageCount = data.data.length;
}
loadImages($container, data, imageCount);
}
}, 100);
}
// pre-sections
if(!window.storeWithExpiration){
var accessToken = $container.data('iat'),
imageCount = '18';
var apiURL = 'https://api.instagram.com/v1/users/self/media/recent/?access_token=' + accessToken + '&count=20';
$container.find('.box').hide();
$.ajax({
url: apiURL,
dataType: "jsonp",
timeout: 5000,
success: function(data) {
if(imageCount > data.data.length){
imageCount = data.data.length;
}
var checkImages = setInterval(function(i){
if($container.find('img').length !== 0){
clearInterval(checkImages);
loadImages($container, data, imageCount);
$container.find('.box').show();
}
}, 100);
}
});
}
});
})(jQuery);
});
</script>
@jonathanmoore

This comment has been minimized.

Copy link
Owner Author

jonathanmoore commented Jan 12, 2018

On January 11, 2018, Instagram made changes to how they structure their image URLs. Now each valid size, thumbnail, low resolution and standard resolution, have unique identifiers as a part of the URLs. The issue has been officially fixed with District 2.4.1, but the following steps will allow you to easily fix District without a full update. If you need help fixing your shop, reach out to us at http://help.stylehatch.com/contact

http://help.stylehatch.com/article/332-update-to-fix-the-instagram-section-for-district

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Under Snippets, click the link Add a new snippet.
  4. Name your new snippet instagram-patch.
    image
  5. In your new snippet file, paste this code hosted on GitHub.
  6. Click Save.
  7. Under Layout, locate the file theme.liquid, and click it to open it in the code editor.
  8. Near the end of the file, right before the closing </body> tag, paste the following code:
{% include 'instagram-patch' %}

image
9. Click Save.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.