We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Portfolio Image display

December 11, 2022 at 8:38 pm #8919

[anonymous]

I am building a site with the Portfolio theme. When I use a gallery, the photos in vertical format are displayed distorted in horizontal format.

You can see here : http://balades-click-clack-fr.s3-website-eu-west-1.amazonaws.com/lhenriette.html

March 3, 2023 at 3:09 am #9460

[anonymous]

I am having the same issue with vertical images in my galleries as well. My galleries are a mix of horizontal and vertical images, and in the past I’ve had to reorient and resave the images in Windows or Photoshop before they would display correctly. Any help would be appreciated. Thanks.

March 3, 2023 at 7:34 am #9461

Bob

The images are stretched to fill the entire dedicated space in the grid. This is the default behavior for many galleries, but it can be adjusted by styling the galleries to display images differently. With the proper styling, images can be displayed in their original aspect ratio without being stretched or distorted.

More about CSS classes generated by the gallery can be found here: https://getpublii.com/dev/default-publii-classes-for-using-with-css/#gallery

March 3, 2023 at 7:44 pm #9464

[anonymous]

Hi Bob,

Thanks for the reply, I realize I should have clarified. The images look great as thumbnails, but when I click on a vertical image it will appear skewed.

Attached are some examples of some thumbnails (which look great) and how the middle image is skewed when I click on it to view larger.

September 22, 2023 at 7:46 am #10619
[anonymous]
I have run into this issue as well. I can make things behave but it’s a little time consuming, I’ll look into making a bug report.

To fix the display of your post go to the HTML view and find the lines that relate to the images. Find the entries that include:
```
data-size="600x800"
```
and change them to:
```
data-size="800x600"
```
Obviously substituting your own image size. Things will then display properly.