Latest Instagram Posts Block: crop or add black bars when images returned from Instagram are not in a 1:1 ratio.

[loyukfai]

Impacted plugin

Jetpack

What

I would like the Instagram Latest Post Block Always Show Images in Square Shape

How

Sometimes, the block doesn't show all images in square shape, it seems to be dependent on the images uploaded to Instagram. If in a particular row, the images are originally uploaded in portrait orientation, then the block will show them in portrait as well.

[jeherve]

Do you see this issue on your own site right now? If so, could you post the URL here so we can take a closer look?

If you'd rather not share your URL, you can send it to us and mention this issue via this contact form: https://jetpack.com/contact-support/?rel=support&hpi=1

---

Possibly related: #15979

[loyukfai]

Yes sure, https://www.peacebazaarhk.com/

Maybe related to #15979, but not AMP related.

[jeherve]

The original Instagram images seem to have a different aspect ratio as well: the first images have a 4:3 ratio, hence the black bars at the top and bottom of the image on the Instagram site:

The following images have a 1:1 ratio, and thus have no black bars:

I believe that's what's causing the difference here.

Did you add those images somewhat differently?

[loyukfai]

Not really, I guess currently, if the images in the same row are 4:3, then the widget will make the row "shorter" as well.

Though for Instagram normally images are shown in square when in a "wall" state AFAIK.

[jeherve]

if the images in the same row are 4:3, then the widget will make the row "shorter" as well.

Yes, that's the idea.

Though for Instagram normally images are shown in square when in a "wall" state AFAIK.

Yes, that could be a nice improvement; we could see about adding black bars like they do on Instagram.

[loyukfai]

Can it be like how Instagram works, that it will crop the images into square instead?

[jeherve]

That would be another option indeed. 👍

[loyukfai]

Hi any news? 😊

[nagpai]

5219566-zd

[hacchism]

Another report: 34947824-hc

[loyukfai]

Is this going to be changed?

[StefMattana]

This GH issue has been mentioned on this forum thread: https://wordpress.org/support/topic/instagram-widget-square-crop/

The user reports the result is inconsistent between platforms and browsers.

[desnum]

A case where adding a (rectangular) video in Instagram throws off the ratio making the row rectangles and not squares: 36111990-hc

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5219566-zen
• [ ] 6455055-zen
• [ ] 6756223-zen
• [ ] 8737127-zen

[loyukfai]

Other related forum threads:

https://wordpress.org/support/topic/latest-instagram-posts-block-in-jetpack-10-0/

https://wordpress.org/support/topic/cropping-pictures-to-square-in-latest-instagram-posts-block/

Cheers.

[jeherve]

This was also reported in this issue: https://github.com/Automattic/wp-calypso/issues/66653

Of note:

• it took a while to get this to show up - but finally was able to replicate. It seems the height changes depending on the contents of the row - rows with videos or reels show up taller, while rows with only photos in them (or possibly with videos but not reels) are shorter.
• In replicating, it helps to have a mix of photos/videos/reels in the feed you're sharing, and to keep the columns low, so you can catch a row with only one kind of content in it. See below:

Example

Workaround details

.wp-block-jetpack-instagram-gallery .wp-block-jetpack-instagram-gallery__grid-post img {
    height: 100px !important;
}

[loyukfai]

.wp-block-jetpack-instagram-gallery .wp-block-jetpack-instagram-gallery__grid-post img {
  height: 100px !important;
}

Thanks a lot for looking into this, will wait for the fix.

Just FYI, this CSS hack doesn't really work well across different screen sizes. For instance, it makes the IG photos show up as rectangular blocks on one of my phones.

Cheers.

[loyukfai]

Hi any news?

[cuemarie]

Ran into this again here: 6455055-zd-woothemes

Providing CSS to resolve, with a slight adaptation to take into consideration the feedback from @loyukfai above (thanks!):

.wp-block-jetpack-instagram-gallery .wp-block-jetpack-instagram-gallery__grid-post img {
    aspect-ratio: 1 / 1;
}

[Gustavo-Hilario]

Another report here: 6756223-zen

The above CSS code helped to temporarily fix this.

[jeherve]

Also in #37383

[ezebecke]

Also in 8737127-zen

Fixed with CSS code.