image height in masonry grid

Hi,

is there a way to control the height of portrait-format images so they match the screen height in a masonry layout? Also, are there possibilities to tweak the layout, so that for example I could have a landscape image spanning two columns? I am trying to recreate something similar to my current website:

https://felixbrueggemann.com/project.php?pid=87

Thanks,

Felix

Trying to do the same here but cant seems to find the answer

Hi @bxilef and @EMRgr... Did you find a solution to this? I am looking to limit the height of portrait images so that they can be viewed in their entirety when a user is scrolling through my gallery. 

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

Thank you!

On 7/4/2020 at 11:37 AM, rGRAYphotog said:

Hi @bxilef and @EMRgr... Did you find a solution to this? I am looking to limit the height of portrait images so that they can be viewed in their entirety when a user is scrolling through my gallery. 

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

Thank you!

It looks fine here. Did you find the solution?

6 hours ago, tuanphan said:

It looks fine here. Did you find the solution?

Hi @tuanphan

Sorry if I didn't specify more... The portfolio page displays the portrait oriented images fine on mobile, but on desktop, the portrait oriented images require scrolling to see the complete image, because the width of the image is full-bleed. So I have been trying to look up a way to not full-bleed vertically oriented images. Do you know anything about this?

This is my page:
https://www.rgrayphotography.com/portfolio/seniors-teens

This is another photog's page, where he has his portrait images centered on the page instead of full-bleed:
http://www.matthernandezcreative.com/guys

Thank you!

On 7/5/2020 at 3:45 PM, rGRAYphotog said:

Hi @tuanphan

Sorry if I didn't specify more... The portfolio page displays the portrait oriented images fine on mobile, but on desktop, the portrait oriented images require scrolling to see the complete image, because the width of the image is full-bleed. So I have been trying to look up a way to not full-bleed vertically oriented images. Do you know anything about this?

This is my page:
https://www.rgrayphotography.com/portfolio/seniors-teens

This is another photog's page, where he has his portrait images centered on the page instead of full-bleed:
http://www.matthernandezcreative.com/guys

Thank you!

Hi @tuanphan,

Did you have a chance to check this out? Is controlling the size of the portrait-oriented images in 7.1 something that can be executed?

Thank you for your time,

Rudy

Anybody figured out how to control the width of portrait oriented images when doing full bleed? Or is it not possible?

Add to Page Settings > Advanced > header

<style>
  @media screen and (min-width:992px) {
  .gallery-masonry-item img {
    width: 75% !important;
    object-fit: contain !important;
    margin: 0 auto;
}
  }
</style>

13 hours ago, tuanphan said:

Add to Page Settings > Advanced > header

<style>
  @media screen and (min-width:992px) {
  .gallery-masonry-item img {
    width: 75% !important;
    object-fit: contain !important;
    margin: 0 auto;
}
  }
</style>

 

Thank you for this, @tuanphan... It does help reduce the width of the images, but it is reducing the width of all the images...

Can we specify change for only the portrait oriented images? Or is that too specific?

Thank you for your time. 

I can't wait to find a solution to this! 

It's the only thing that's keeping me from moving to 7.1 now. I have many projects that are portrait and in my opinion it's really important to be able to first show a work it it's entirety, not a 3rd of it.

I've seen suggestions like put a spacer both sides of your image in your gallery block, but you can't put a spacer next to just one image. The whole thing moves 🙂

Another suggestion (from support) is to use blank pages and add for every image a new block. Yes then it works! You can change width of your portrait image. It will take ages though if you have lots of material.

17 hours ago, Comfort said:

I can't wait to find a solution to this! 

It's the only thing that's keeping me from moving to 7.1 now. I have many projects that are portrait and in my opinion it's really important to be able to first show a work it it's entirety, not a 3rd of it.

I've seen suggestions like put a spacer both sides of your image in your gallery block, but you can't put a spacer next to just one image. The whole thing moves 🙂

Another suggestion (from support) is to use blank pages and add for every image a new block. Yes then it works! You can change width of your portrait image. It will take ages though if you have lots of material.

That doesn’t really work with a gallery block, as it’s like a collection of images, so you can’t add spacers to individual images...

I thought of using Photoshop and save the portrait images as a landscape image, but with white borders. BUT... that only looks good for desktop browsers. It looks a bit horrendous on mobile.

5 hours ago, rGRAYphotog said:

I thought of using Photoshop and save the portrait images as a landscape image, but with white borders. BUT... that only looks good for desktop browsers. It looks a bit horrendous on mobile.

yeah I tried that as well.

Yesterday I had good results on desktop using individual image blocks. The site is not live but  I made some screenshots for comparison:

Page as a gallery block:

https://www.dropbox.com/s/r0i0kzn3lbrd7x2/galleryblock01.jpg?dl=0 and https://www.dropbox.com/s/my8tkxufopn19jt/galleryblock02.jpg?dl=0

As in dividual image blocks: https://www.dropbox.com/s/49ek5bgzrx7fuzg/imageblocks01.jpg?dl=0 and https://www.dropbox.com/s/9ae3czrkyzofd0u/imageblocks02.jpg?dl=0

The image blocks don't look good on mobile: https://www.dropbox.com/s/o16yp3fdxejwldw/mobile.jpg?dl=0

The image blocks were set to poster, so they look darker.

6 hours ago, Comfort said:

yeah I tried that as well.

Yesterday I had good results on desktop using individual image blocks. The site is not live but  I made some screenshots for comparison:

Page as a gallery block:

https://www.dropbox.com/s/r0i0kzn3lbrd7x2/galleryblock01.jpg?dl=0 and https://www.dropbox.com/s/my8tkxufopn19jt/galleryblock02.jpg?dl=0

As in dividual image blocks: https://www.dropbox.com/s/49ek5bgzrx7fuzg/imageblocks01.jpg?dl=0 and https://www.dropbox.com/s/9ae3czrkyzofd0u/imageblocks02.jpg?dl=0

The image blocks don't look good on mobile: https://www.dropbox.com/s/o16yp3fdxejwldw/mobile.jpg?dl=0

The image blocks were set to poster, so they look darker.

Oh nice. I see what you're doing now. I would like the landscape images to be full bleed at the same time. But I guess maybe we can't have the best of both worlds... Lol. Thanks for sharing!

Artists & designers want to be in creative control over how their work is presented. Some of these (in my eyes) very obvious and basic principles have yet to be implemented by Squarespace for 7.1.

Anyways, the image blocks are full bleed. For a moment I was hopeful it's possible to add the original image as a background and use a transparent png in front of it to keep a height, but the background looks cropped. DIdn't spend much time on it so you could try yourself.

11 hours ago, Comfort said:

Artists & designers want to be in creative control over how their work is presented. Some of these (in my eyes) very obvious and basic principles have yet to be implemented by Squarespace for 7.1.

Anyways, the image blocks are full bleed. For a moment I was hopeful it's possible to add the original image as a background and use a transparent png in front of it to keep a height, but the background looks cropped. DIdn't spend much time on it so you could try yourself.

 

 

 

You're right. Should be much more control available for those of us who want it...

Hmm.. that is a clever way to go around it... Thanks for the idea.

Hi @tuanphan

I have changed the design of the homepage of the website again and I'm having a problem with how it is looking like on the mobile version!

If I leave the transparency on, the logo gets hidden because of the images on the homepage, but if I turn it off, the first six (the top two lines on the desktop version) images of the website simple disappear.

Could you please help me on how to have the transparency off (so the white bit on the top is there) but showing all images on the homepage?

www.charlielangton.com

On 3/5/2021 at 8:49 PM, EMRgr said:

Hi @tuanphan

I have changed the design of the homepage of the website again and I'm having a problem with how it is looking like on the mobile version!

If I leave the transparency on, the logo gets hidden because of the images on the homepage, but if I turn it off, the first six (the top two lines on the desktop version) images of the website simple disappear.

Could you please help me on how to have the transparency off (so the white bit on the top is there) but showing all images on the homepage?

 

www.charlielangton.com

 

 

In Custom CSS, change 90vh to 210vh

On 3/11/2021 at 5:21 AM, tuanphan said:

In Custom CSS, change 90vh to 210vh

 

You’re a genius. Thank you very much @tuanphan

One last question: is it possible to centralize the logo? I don’t get it why it’s a bit to the right side of the screen.