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

image height in masonry grid


bxilef

Recommended Posts

  • 3 months later...
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

Link to comment
  • 2 weeks later...
  • 3 weeks later...

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment

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.

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

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

Link to comment

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.

 

 

 

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

Link to comment
  • 6 months later...

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

 

 

Screenshot 2021-03-05 at 13.45.15.png

Screenshot 2021-03-05 at 13.44.42.png

Screenshot 2021-03-05 at 13.44.25.png

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

 

 

Screenshot 2021-03-05 at 13.45.15.png

Screenshot 2021-03-05 at 13.44.42.png

Screenshot 2021-03-05 at 13.44.25.png

In Custom CSS, change 90vh to 210vh

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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.

 

A609DAC9-D242-4D97-9562-3FC2B775EFF2.png

Link to comment

I can hardly wait to discover an answer for this! 

It's the lone thing that is holding me back from moving to 7.1 at this point. I have numerous undertakings that are picture and as I would like to think it's truly essential to have the option to initially show a work it's sum, not a third of it. 

I've seen ideas like put a spacer the two sides of your picture in your exhibition block, yet you can't put a spacer close to only one picture. The entire thing moves 🙂 

Another idea (from help) is to utilize clear pages and add for each picture another square. Indeed then it works! You can change width of your representation picture. It will take ages however on the off chance that you have bunches of material.

Edited by joealen
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...