Jump to content

reduce width and vertical height for grid-masonry gallery images in 7.1

Recommended Posts

Hi have tried looking to see if there is a code already mentioned that i can use but can't see a response to help with my query.

I am on version 7.1 and have set up a grid-masonry galley with landscape and portrait format images with inset width. I would like to reduce the width further but cannot find a way to do that.

I am also having problems with the portrait format images appearing very large vertically with the whole image being higher than the screen size. This means only 2/3rds of the portrait image is visible at one time and you need to scroll down to see the bottom 1/3rd of the image (see attached photo of example). 

72371354_verticalimage.thumb.jpg.50d40e33ed4c98c295c01d230f086d93.jpg

The html code for one of the portrait images from inspect is as below:

<img data-src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image-dimensions="1667x2500" data-image-focal-point="0.5,0.5" alt="Elmina Castle, Elmina" data-load="false" style="width: 502px; height: 752px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.7" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg?format=2500w" id="yui_3_17_2_1_1577661569410_1336">

Any suggestions on how i can control both the width (of landscape photos) and height of the portrait images?

thanks in advance

Link to comment
  • 6 months later...
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 12/29/2019 at 6:54 PM, IvanOB said:

Hi have tried looking to see if there is a code already mentioned that i can use but can't see a response to help with my query.

I am on version 7.1 and have set up a grid-masonry galley with landscape and portrait format images with inset width. I would like to reduce the width further but cannot find a way to do that.

I am also having problems with the portrait format images appearing very large vertically with the whole image being higher than the screen size. This means only 2/3rds of the portrait image is visible at one time and you need to scroll down to see the bottom 1/3rd of the image (see attached photo of example). 

72371354_verticalimage.thumb.jpg.50d40e33ed4c98c295c01d230f086d93.jpg

The html code for one of the portrait images from inspect is as below:

<img data-src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg" data-image-dimensions="1667x2500" data-image-focal-point="0.5,0.5" alt="Elmina Castle, Elmina" data-load="false" style="width: 502px; height: 752px; object-position: 50% 50%; object-fit: cover;" data-parent-ratio="0.7" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5df7b9c2c15c2c1fc90f169e/5e0641c31aa65222ba975ea6/5e064206e2b52a3155f25a0b/1577574232104/okyiva_120101_5586.jpg?format=2500w" id="yui_3_17_2_1_1577661569410_1336">

Any suggestions on how i can control both the width (of landscape photos) and height of the portrait images?

thanks in advance

Hi, have you found a solution to this? I was hoping to limit the height of all images to be displayed. Thank you.

Link to comment

@rwp...  Thank you for your reply. If you'd scroll down this page, you will see a bunch of landscape-oriented shots. Those fit as they should. Then you will see a couple of portrait-oriented shots. Would like to see these to be the same height as the others so that a viewer can see the full image without having to scroll down.

https://www.rgrayphotography.com/portfolio/seniors-teens

16 hours ago, rwp said:

Post a link to your page and I will check it out.

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.