Tiled Galleries: circle galleries "squish" the images

[mikeyarce]

1. Add the Gallery Widget to your Widget Area
2. Add a few images
3. Select them to be displayed in the Circle Style
4. Some of the images will look squished - without proper dimensions.

My Widget:

My Sidebar:

Note the second row, all images seem to have been squished.
originally reported by user in #2060350-t

[dereksmart]

Is this a bug? This also happens for "square tile" view.
I feel like this is expected for images that aren't square. In order to make a circle or square from a rectangle image, we either need to resize the image or crop part of it out. Do you recommend we do the latter instead?

[dereksmart]

After a short internal discussion - cropping is way better

[jeherve]

Also reported in 2093606-t

[samhotchkiss]

@jeherve @dereksmart -- any reason we need to push this to 3.5? Should be a pretty simple param to crop instead of squish, right?

[dereksmart]

It may have been tagged 3.5 because of 3.4 beta? Since it's not broken on wpcom, the culprit is probably in Jetpack. I'll take a look today.

[dereksmart]

Actually, may have been tagged for 3.5 because the url params to resize & crop only work for images served from wpcom/photon. I'll look for another way to do this on our end that won't interfere with wpcom, since all the gallery widget code is synced.

[s-a-s-k-i-a]

Will this be worked on? As for now, I won't be able to make use of the galleries in my clients site, because her images get squeezed.

[gracie]

Also reported in #3115337-t on a WPCOM site.

As a note, the issue doesn't impact a site if you stay on Desktop and narrow the browser to a mobile size. It seems to only impact mobile devices. I'm not sure what's different between the two ways of viewing, but perhaps whatever is impacting the desktop view can be pulled over to the mobile view.

Narrow desktop window:

Mobile window:

[rachelmcr]

There were similar reports on the WordPress.com side and some fixes to address the issue, although it isn't entirely resolved. Internal ref: 7861-wpcom

[m-metz]

For me, both Square Tile, and Circles stretch/squish the images.

This is on a self-hosted install, but still, whenever I use Jetpack Tiled Galleries, without their Photon CDN, Square Tile, and Circle, is always stretching non-square images. This occurs even after regenerating thumbnails.

What's weird is that in the Jetpack Demo they have non square photos for their galleries, and they are not distorted.

My only guess is that they are using Photon CDN and I'm not. Or that I am self hosted (on DreamHost) and they are not.

Here is my link, but the domain may change in the near future, so refer to the screenshot. https://mjmetz.northstarexteriors.ca/dev.brielle-cosmetic-couture.lan/gallery/

Any suggestion on a workaround would be much appreciated (CSS or a filter in WordPress).

[jeherve]

@Soft-Shock Do you use Jetpack's Development mode on your site, to be able to use Tiled Galleries without Photon? What happens when you activate Photon on your site?

[m-metz]

Ah, unfortunately I am only using JETPACK_DEV_DEBUG mode. I didn't want to hook up the client's site to wordpress.com, and they don't have a wordpress.com account.

I finally see the warning, in the jetpack media settings

Speed up images and photos

Must be enabled to use tiled galleries.

but it was greyed out, so it was hard to see.

I temporarily connected my account to the development site and the images resize properly with Photon.

So I guess I either need clients to have a free wordpress.com account, or use a different tiled gallery plugin (for circle and square tiled. Tiled Mosaic and Tiled Columns work without photon).

[jeherve]

I guess I either need clients to have a free wordpress.com account

It might be worth asking them, they might already have one; if they don't it could be useful for them to get one for other things as well, like Gravatar or Akismet.

You can also help them and create that account for them, and only change the account's email address to theirs when you're ready to hand it over. To create a simple account without a WordPress.com site, you can use this link: https://wordpress.com/start/jetpack

[m-metz]

Great, thanks for the tips @jeherve!

[donpark]

FYI, this is now happening consistently on WPCOM Simple sites for Square Gallery added using Classic Editor. Jetpack Block version display correctly, however.

Simplest fix I found was to add object-fit: cover to image tag style.

[donpark]

I have a tentative patch D28285-code that fixes Squished Tiled Gallery image problem for Square and Circle mode on WPCOM. What I don't fully understand is why same problem exists on Jetpack sites.

[AtrumGeost]

Hi folks!

I'm reopening this issue since this is still happening on WordPress.com simple sites with the Classic Editor. I was able to reproduce this on my test site using a "Square Tiles" gallery with 2 columns:

This was reported here: 4983350-hc

And here's my test site where I could replicate that: https://atrumtest03.wordpress.com/2019/06/17/testing-gallery-4983350-hc/

Also adding the follow-up ID for reference 2115855-zen

---

macOS Mojave 10.14.5 (18F132) | Chrome Version 75.0.3770.90 (Official Build) (64-bit)

[donpark]

I'm reopening this issue since this is still happening on WordPress.com simple sites with the Classic Editor. I was able to reproduce this on my test site using a "Square Tiles" gallery with 2 columns:

My patch D28285-code, awaiting review, will fix this for WPCOM.

[donpark]

My patch D28285-code, awaiting review, will fix this for WPCOM.

Hate to remind y'all but nothing will get fixed unless the patch is accepted and deployed.

[donpark]

FYI: Patch for Jetpack has been committed and should ship in the next release. Patch for WPCOM (D28285-code) will be deployed as soon as it's approved. Stay tuned.

[donpark]

WPCOM patch deployed! Thanks to @jeherve @simison and @lancewillett.