Gallery thumbnails do not show whole photo

[coolemail2]

We are using gallery module. We have a mix between portrait/landscape photos. We have re-sized all landscape to 750 wide and all portrait to 500 tall. When we put them in the gallery, the thumbnails of the portrait photos only show part of the photo. Can we get it so that you see the whole thumbnail?

 

[dave-ha]

coolemail2, is the issue the same as in this post?

 

[coolemail2]

dave-ha Hi,
Thanks for responding. We are actually saving the images on the server, not on Picasa in this case. I have sent you a PM with a couple of examples of it in our case. Thank you for the response and I look forward to hearing from you.

 

[Egor Chernodarov]

Could you attach some examples here or send them to me please?

 

[coolemail2]

Hi Egor,
An example of a portrait which is cropped is as below (on a Windows with Google Chrome or Firefox or IE11)


They look fine with Safari on Mac OS X. But with Firefox (on Mac OS X), Internet Explorer, Chrome and Opera on Windows 7 they are cropped. I assume it is a CSS issue in WPB that Parallels could solve?
Can you give us a temporary CSS fix?

 

[coolemail2]

Egor, Have you had a chance to look at this yet?

 

[pinfog]

I've exact the same problem, how can i fix it?.

 

[Egor Chernodarov]

Hi there!

I'll copy/paste my answer here also...

Seems I see what you mean.
Thumbnails for preview is covering box and placed as "center top" (horizontal vertical).
These thumbnails are positioning by CSS styles.

You can redefine these styles with something like this:

<style type="text/css">
.preview {
    background-position: center !important;
}
</style>

It makes thumbnail to be centered both by horizontal and vertical sides.
For additional variants you can look up to "background-position" CSS syntax.

You can tell me if you needed my help here.

 

[coolemail2]

Hi Egor, Thank you for that. I have put that code into the Settings > Advanced > Edit Metadata but it is still the same. That is on Internet Explorer, Chrome and Opera on Windows 7

 

[Egor Chernodarov]

It's a difference at my Opera browser:
Could you explain please what you expect at these thumbnails?

 

[coolemail2]

Thanks Egor,

The problem appears to be with Windows computers. I do not have a Mac but friends with one say that it looks OK on those. On Windows browsers, we only get part of the photo if it is a portrait one. What we would like is for it to be as per this iphone screen capture:

where you can see the whole portrait photo in the thumbnail. Compare this with the screen captures in the previous post and you will see in the first ones we only see a part of the photo.

When we put in your code to the Settings page, it made no difference to the Windows 7 browsers. On the Apple products though, it looked like this:

so you could see the whole photo but instead of black around the edge of the photo, we got just more photo.

Can you help resolve all that?

 

[Egor Chernodarov]

Ok, for such behavior you should add:

<style type="text/css">
.preview {
    background-size: contain;
}
</style>

It's what you want?