Cancel crop photos

https://cloud.mail.ru/public/8mGs/2GtA27gwh

it’s printscreen

Hi there,

Most of our customers like the square cropped images in their feed but it makes sense to have the originals if you have a lot of non-square posts.

You won’t be able to configure this in the Settings but you can use some custom javascript to achieve this. Go to the Settings page, “Customize” tab, and scroll down to the “Custom Javascript” area. Paste in the following:

$('#sb_instagram .sbi_photo').each(function(){
    $(this).css('background-size', '100%' );
});

Let me know if you need more help with this!

– Craig

Thanks, but it did not help (((
the image is still a bit clipped vertically
Here is the link to this image
https://www.instagram.com/p/_T1eeQvWRe/

user_id 1436253928

Can I ask you to see how it will show on your test site???
With what settings it’s displayed in full size?

and here is this image
https://www.instagram.com/p/_GqcawPWeE/
It displayed correctly, although it is also rectangular

Please help solve this problem

Hi again,

Sorry I just realized that the custom code would only work for landscape images. This should detect whether the image is portrait or landscape and change it accordingly:

$('#sb_instagram .sbi_photo').each(function(){
    var $self= $(this),
    photoHeight = $self.find('img').eq(0).innerHeight();
    photoWidth = $self.find('img').eq(0).innerWidth();

    if(photoHeight > photoWidth) {
        $self.css('background-size', 'auto 100%');
    } else {
        $self.css('background-size', '100% auto');
    }
});

This worked on my test page and also when I recreated your specific feed so it should get the posts looking like you want.

Thanks,

Craig

YEEEEEEES
thanks a lot!!!!!
the best support!!!

No problem! Glad we could find a fix. Thank you very much for the review as well. That really helps us out.

Many thanks,

Craig

This also helped me out so much! I really appreciate the high quality and extremely detailed support you have here! Couldn’t thank you enough!

– Jeff Arnold

I tried applying this to my site and it won’t work for me. My Instagram feed is 9 images in 3 columns. If I use the code at a width of 500px or larger it works, but otherwise it does not. Is there something I can do to make it work at a width of 300px in my sidebar?

Thank you!

Hey oddlyinsightful,

It’s possible that delaying the effect might work. You can wrap the code in a timeout function like this:

setTimeout(function(){
$('#sb_instagram .sbi_photo').each(function(){
    var $self= $(this),
    photoHeight = $self.find('img').eq(0).innerHeight();
    photoWidth = $self.find('img').eq(0).innerWidth();

    if(photoHeight > photoWidth) {
        $self.css('background-size', 'auto 100%');
    } else {
        $self.css('background-size', '100% auto');
    }
});
}, 500);

Otherwise, it might be an issue I would need to take a look at first hand. Could you send me a link to the page or contact us on our support page if you don’t want to share the link here:
https://smashballoon.com/instagram-feed/support/

Sure. Here is a link to the site I am building. https://oddlyinsightful.com/

The first Instagram feed in the sidebar is not Smash Balloon, but it has the effect I am looking for. The Instagram feed below that is the result I get when I use Smash Balloon with the the JS code you provided.

Ahh I see the problem now. Sorry I forgot that when the images are small they come as square cropped thumbnails so this code would not have an effect. What you can do is change what images come from Instagram.

Go to the Settings page, “Customize” tab, and scroll down to the “Photos” section. Change “image resolution” from auto to medium 306X306. You’ll be loading bigger images than necessary but this will allow them to be shown in their original aspect ratios.

You can remove the delay from the javascript since it won’t be needed.

Let me know if you need any more help with this!

That worked!!! Thank you!!! ??

No problem! Glad to hear that fixed the issue. No obligation of course, but if you like the plugin and feel like leaving a super-quick review then we always really appreciate it!

If you have any other questions or issues in future then just let me know and I’d be happy to help.