Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
bxilef

image height in masonry grid

Recommended Posts

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

 

Share this post


Link to post
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post

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>

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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. 

Share this post


Link to post

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.

Share this post


Link to post
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.

Share this post


Link to post
Posted (edited)
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.

Edited by Comfort

Share this post


Link to post
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!

Share this post


Link to post

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.

 

 

 

Share this post


Link to post
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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...