Distorted thumbnails

kolohe280 · 2017-09-03 07:24:12

I'm just starting with Backlight, and have come across an issue with perfectly square pictures. You can see the problem in this album:

https://maka-kaina.info/galleries/2016/spring-2016/

The first few pictures in the album have stretched thumbnails. The 4th picture had the same problem until I just slightly cropped it in Lightroom (to make it non-square) and re-published it. I also tried completely deleting the album and re-creating it.

Any ideas?

Last edited by kolohe280 (2017-09-03 07:24:34)

charlie.choc · 2017-09-03 07:58:26

What gallery style are you using in the thumbnail grid? If you are using 'justified' then that's what it will do, try "masonry' or 'classic'.

rod barbee · 2017-09-03 09:08:15

it's the aspect ratio that you're using. Try changing it to 3:2 or 1:1

kolohe280 · 2017-09-03 09:09:12

Classic.

I meant to mention that in the original post.

kolohe280 · 2017-09-03 09:20:41

If I change the aspect ration to 1:1, it works for the square pictures. That's not really the look I want for the site, however. It seems odd that my 5:3 aspect ratio can adapt to any pictures except one that's a perfect square. At first I thought it might be a Chrome issue, but it does that with every browser I tried it in.

kolohe280 · 2017-09-03 12:09:25

I took a look at this with Chrome's developer tools (which I had never used before - pretty cool).

If I change the class of the IMG element from landscape to portrait, it renders correctly.

I'll leave it to those of you who have more in-depth knowledge of CSS than I to determine why

rod barbee · 2017-09-03 13:45:26

you'll find that if you stretch the aspect ratio even farther (2:1, 3:1) you'll see that all horizontal images will stretch. I don't know if this is a bug or not.
Something for Matt to comment on.

kolohe280 · 2017-09-03 14:24:07

I see that now that I tried it on another album.

Might have to switch to another layout.

charlie.choc · 2017-09-03 21:25:04

Masonry layout handles square photos on my site as well as portrait and landscape 2X3, etc.

Matthew · 2017-09-04 00:34:44

I'll need to expand the logic and be more heavy-handed with it to account for the handling of square images when using such an unusual aspect ratio for grid cells.

kolohe280 · 2017-09-04 03:16:02

After taking a look at what I'm trying to do, don't spend a lot of time trying to fix this on my account.

I've switched over to the Justified thumbnail layout. It seems to be working for me, and has caused a couple of other problems caused by some really long photo captions to go away.

I suspect there are other more pressing need for your time, Matt.

Great product, by the way! I waited a long time before buying, and I shouldn't have!!

Matthew · 2017-09-04 14:43:33

Thanks for the compliment, and I'm glad to hear you feel that way about using Backlight.

I think I've got the thumbnail issue solved in my development build. Previously, we evaluated each image and applied a class, either "landscape" or "portrait", defining how the image should scale when overlarge for its allotted space in the album grid (which varies according to display size and other factors).

The new logic adds a new "square" class, and first evaluates the aspect ratio of the grid cells, assigning them also a value of "landscape", "portrait" or "square". We then compare the thumbnails to the grid cells to determine the appropriate scaling for each class of image.

Previously, square images always scaled as "landscape" -- and in most contexts, that's fine. In your case, however, having landscape-oriented cells, this was causing a problem. Under the new logic, square class images will be scaled the same as "portrait" when in landscape-oriented cells, which solves your problem.

This should roll out in our next update, whenever it happens. I'm not quite sure when that's going to be yet.

Community @ The Turning Gate

#1 2017-09-03 07:24:12

Distorted thumbnails

#2 2017-09-03 07:58:26

Re: Distorted thumbnails

#3 2017-09-03 09:08:15

Re: Distorted thumbnails

#4 2017-09-03 09:09:12

Re: Distorted thumbnails

#5 2017-09-03 09:20:41

Re: Distorted thumbnails

#6 2017-09-03 12:09:25

Re: Distorted thumbnails

#7 2017-09-03 13:45:26

Re: Distorted thumbnails

#8 2017-09-03 14:24:07

Re: Distorted thumbnails

#9 2017-09-03 21:25:04

Re: Distorted thumbnails

#10 2017-09-04 00:34:44

Re: Distorted thumbnails

#11 2017-09-04 03:16:02

Re: Distorted thumbnails

#12 2017-09-04 14:43:33

Re: Distorted thumbnails

Board footer