Assorted Instagram image sizes

Assorted Instagram image sizes

As of the 30th August 2017, Instagram's API now fetches images of all different shapes and sizes. No longer will your images always be square.

You might find your images look a little bit like this:

This happened due to an unexpected change to the Instagram API - they didn't tell us this was coming! We are currently discussing this with other theme developers to figure out the best way to show mixed image sizes on a store, and whether or not this is actually a bug that Instagram might be able to sort out for us.

The simplest way to fix this is to use square images on Instagram. Then there will be no cropping necessary in the Instagram gallery, or on your store. The images will show everywhere exactly how you uploaded them.

If you want to take advantage of mixed-size images on Instagram, but want them shown in uniform squares on your site, then we can offer a quick fix to get these cropped on your store.

Read on...


How to crop your Instagram images in a Clean Themes Shopify theme

This will involve copying and pasting a chunk of code into the bottom of a theme file on your store.

Go to your themes page, select 'Actions' and 'Edit code' to get into the theme template editor.

Locate Assets > theme.js.liquid in the panel on the left, and open it up.

Scroll right down to the bottom of this file. Underneath the existing code, click inside the template and press return a few times to make some extra space.

The following screenshot gives an indication of where you'll want to paste this new code:

Copy and paste the following code into there:

// force square Instagram images

$(document).on('ready shopify:section:load', function(){

clearInterval(window.instagramSizeCheckIntervalId);

if($('.willstagram').length) {

window.instagramSizeCheckIntervalId = setInterval(function(){

if($('.willstagram img').length) {

$('.willstagram img').closest('.willstagram').addClass('willstagram--squared');

if($('.willstagram:not(.willstagram--squared)').length == 0) {

clearInterval(window.instagramSizeCheckIntervalId);

}

$('.willstagram .item').each(function(){

$(this).find('a').wrap('<div>').parent().css({

position: 'relative',

height: 0,

paddingTop: '100%',

overflow: 'hidden',

backgroundPosition: 'center center',

backgroundSize: 'cover',

backgroundImage: 'url("' + $(this).find('img').attr('src') + '")'

}).find('a').css({

position: 'absolute',

top: 0,

left: 0,

width: '100%',

height: '100%'

}).find('img').css('visibility', 'hidden');

});

}

}, 750);

}

});

Job done! This code will check for any Instagram images and force them into a square shape.


Will Broderick
Continue shopping
Your Order

You have no items in your cart