Not getting perfect squares in feed

As a follow-up question, this plugin is loading an old version of FontAwesome (4.2), messing up some of my Google+ font icons.

Is there a way to direct the plugin to unload its version of FontAwesome?

Hello,

It looks like the javascript that sets the size of images in the feed is being fired too early for your particular site. We can work around this with some custom javascript. Could you go to the Settings page, “Customize” tab and scroll down to the “Custom Javascript” section and try pasting this in?

setTimeout(function(){
    jQuery('#sb_instagram .sbi_photo').css('height', jQuery('#sb_instagram.sbi_photo').eq(0).innerWidth() );
}, 500);

If that doesn’t seem to fix the issue could contact us at our support page with a link to the page so we can try some other things? Here is the link:
https://smashballoon.com/instagram-feed/support/

Hi Craig, I dropped a line to your support 3 days ago but I haven’t heard back.

Anyway for others that may have an issue like this I managed to find a fix that works across all browsers (except IE8 and older):

<script type="text/javascript">
jQuery(document).ready(function() {
if (jQuery(window).width() > 480) {     // excludes mobile browsers
setTimeout(function(){
  jQuery('#sb_instagram .sbi_photo_wrap').each(function () {
    var jQuerycontainer = jQuery(this),
        imgUrl = jQuerycontainer.find('img').prop('src');
    if (imgUrl) {
      jQuerycontainer
        .css('backgroundImage', 'url(' + imgUrl + ')')
        .addClass('compat-object-fit');
    }
  });
}, 5000);     // for some reason a super long timeout is required
}
});
jQuery(window).resize(function() {    //dynamic height transformation
var cw = jQuery('.sbi_photo_wrap.compat-object-fit').width();
jQuery('.sbi_photo_wrap.compat-object-fit').css({'height':cw+'px'});
});
</script>

With the following CSS:

#sb_instagram .sbi_photo_wrap.compat-object-fit {
    background-size: cover;
    background-position: center center;

#sb_instagram .sbi_photo_wrap.compat-object-fit img {
    opacity: 0 !important;
}

Adapted from: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.y82keg7ey

Just changing the height with your jQuery suggestion won’t fix this as it will simply leave a stretched the image. The CSS object-fit:cover property is required but unfortunately that is not supported by IE or Edge at all right now.

Hey there,

Sorry about that, something must have happened with your ticket. I’ll have to look into it. I am glad you were able to find a fix and thanks for sharing! Let me know if there is anything else I can do for you.

Hi Craig,

Thanks for your quick response! Well it would be nice if there was a proper fix (rather than my hack), as I don’t want to have to be revisiting my hacked code every time there’s a plugin update.

Great plugin btw!

Cheers

Yes, for sure! I’ll let the developer know about this issue. We haven’t had any other sites needing this extreme of a work around. Occasionally a site will need some code to resize the images after a half second wait but 5 seconds seems like a lot. I will let you know what he says.

Thanks!

Hello again,

I spoke with the developer about this issue. He is wondering if you may have put the custom javascript I sent in another spot rather than inside our plugin’s “Custom Javascript” area. The code you save in that text area fires after the javascript from the Instagram plugin which might help it work correctly.

The code saved in there will not be overridden when the plugin updates as well.

Also, it looks like we got your ticket and I sent a response but it must not have gotten to you. Sorry about that!

Hi Craig,

In the support ticket that I sent I included full details of my build as from the ‘support’ tab in the plugin, the info there would have shown that your suggested custom javascript was included in the plugin’s own “Custom Javascript” area.

I’ll just leave that very complicated jQuery script that I have in place for now, I’ve modified it such that it only applies to browsers that don’t support the CSS object-fit:cover property, and I’ve reverted to using object-fit:cover for the modern browsers.

I guess I’ll mark this as resolved for now, but I’ll be back if/when something breaks! XD

Sounds good. We will definitely help you out if it does! Sorry for the mix up. Glad you like our plugin as well.

– Craig