Hey Sam,
You can use some custom javascript to recalculate the height of the images to match the width. Go to the Settings page, “Customize” tab, and scroll down to the “Custom Javascript” area. Paste in this code:
jQuery(window).resize(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
});
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
Let me know if you have any questions about this. I hope you are having a great day!
Hey Craig!
Thanks for the fast response! That works, for a split moment and then the images revert back to the original height. On scroll it triggers again, they shrink to the correct aspect, but then jump back up to full height again. It’s kinda crazy!
Any ideas? It doesn’t seem to do it when the image size is set to thumbnail. Is there a way to force thumbnail version for mobile only?
Thanks very much,
Sam
Hey Sam,
Hmm that is crazy! I wonder if adding a delay will fix your problem. Try this instead:
jQuery(window).resize(function(){
setTimeout(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 500);
});
setTimeout(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 500);
If you still have the same problem, could you send me a link to take a look first hand? If you don’t want to give out a link on the forum, you can contact us from our support form: https://smashballoon.com/instagram-feed/support/
Hey Craig!
That works perfectly! Thanks very much for your help. 5* review on the way and most likely another paid plugin member!
Really appreciate your time and your help 😀
Sam
Hey Sam,
Glad that fixed the issue! We appreciate the review as well that really helps us out. We would love to have you as a customer for our premium version so thanks for your interest in that too. Let me know if you need any assistance setting it up.
Many thanks,
Craig
this works but flashes the wrong proportion for split second. is there a way to get rid of that?
Hey tounsoo,
Some themes will not need the delay in this code or might not need a full 500 milliseconds:
jQuery(window).resize(function(){
setTimeout(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 500);
});
setTimeout(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
}, 500);
You can try adjusting the “500” number to be lower or you can remove that part of the code completely since it will likely still work like this:
jQuery(window).resize(function(){
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
});
jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram .sbi_photo').eq(0).innerWidth() );
Let me know if you are still having trouble and I can take a look at the page you are having trouble with.
