Creating custom aspect ratios for portfolio page

Site URL: https://mackerel-primrose-ctj9.squarespace.com/

Hi,

I would like to use a custom (2:1) aspect ratio for the projects shown in the grid display of my main portfolio page. The drop-down menu is limited to the following:

Is there a code I can use to achieve that 2:1 aspect ratio to avoid any cropping to my custom 2:1 images?

https://mackerel-primrose-ctj9.squarespace.com/
pw: demosite

Just as a reference, there was a question almost identical to mine which I found in search, however the code provided didn't seem to do anything when applied to my site:

Thank you for the help.

You mean keep 16:9 for all porfolio pages, and use 2:1 for specific grid portfolio page?

Yes, this just refers to the one grid portfolio page where I display my main work. 

On 12/5/2021 at 2:30 AM, LiamM said:

Yes, this just refers to the one grid portfolio page where I display my main work. 

Add to Design > Custom > Then save & reload the site

/* Homepage 2:1 ratio */
body.homepage .portfolio-grid-overlay .grid-item, body.homepage .portfolio-grid-overlay .grid-image {
    padding-bottom: 50% !important;
}

That worked- thank you very much!

On 12/7/2021 at 8:58 AM, LiamM said:

That worked- thank you very much!

It looks like you haven't changed About Page SEO Title so the browser tab name still shows "Contact 3".

Is it possible to keep the original aspect ratio in a grid gallery? like I have a mixed grid gallery of landscape and portrait images. Is it possible to keep them the same ratio and equivalent size? 

19 hours ago, failbetter said:

Is it possible to keep the original aspect ratio in a grid gallery? like I have a mixed grid gallery of landscape and portrait images. Is it possible to keep them the same ratio and equivalent size? 

Can you share link to grid gallery?

Hi @tuanphan! Could you possibly help me with the same issue for justinli.ca/art and justinli.ca/commercial? I want to preserve the original aspect ratio of the images in these galleries.

On 12/1/2022 at 7:40 AM, justinli said:

Hi @tuanphan! Could you possibly help me with the same issue for justinli.ca/art and justinli.ca/commercial? I want to preserve the original aspect ratio of the images in these galleries.

2 sites needs same ratio or different and which ratio?

20 hours ago, tuanphan said:

2 sites needs same ratio or different and which ratio?

Thanks for replying @tuanphan. I want both sites to display my original images, retaining the same aspect ratios from when they were uploaded, instead of being cropped to all the same. 

Hello @tuanphan, I would like access to the same code as @justinliif possible - original aspect ratio for images in "Grid : Overlay" section on a portfolio page.

Thank you!

On 12/14/2022 at 6:57 AM, SKPhotography said:

Hello @tuanphan, I would like access to the same code as @justinliif possible - original aspect ratio for images in "Grid : Overlay" section on a portfolio page.

Thank you!

If you share link to page where you use Grid, we can check it again easier

@tuanphanhere is a link to the page I would like to retain original image aspect ratios using the grid overlay portfolio template https://www.skphoto.co/portfolio-1

On 1/4/2023 at 3:10 AM, SKPhotography said:

@tuanphanhere is a link to the page I would like to retain original image aspect ratios using the grid overlay portfolio template https://www.skphoto.co/portfolio-1

Hi,

The url doesn't work.

@tuanphanit's working now, sorry about that!

On 1/8/2023 at 10:58 PM, SKPhotography said:

@tuanphanit's working now, sorry about that!

Hi,

Which page you want to use custom ratio?

https://www.skphoto.co/portfolio-1

@tuanphanthe page shown in the link, "portfolio-1"

On 1/18/2023 at 4:02 AM, SKPhotography said:

@tuanphanthe page shown in the link, "portfolio-1"

Add to Portfolio-1 Page Header

<style>
  .tweak-portfolio-grid-overlay-image-aspect-ratio-11-square .portfolio-grid-overlay .grid-image, .tweak-portfolio-grid-overlay-image-aspect-ratio-11-square .portfolio-grid-overlay .grid-item {
    padding-bottom: 50% !important;
}
</style>

If you use Personal Plan, let me know, I will give another code

@tuanphanThank you! But the images look to be cropping to 16:9 - was there a way to change the code to retain the original aspect ratio?

hi 🙂 @tuanphan

I also have a similar problem.

I would like to set a customised aspect ratio, an even thinner rectangle than the ultrawide screen, so 48:9 (super-super ultrawide).  

I would like to have this setting only in all preview portfolio pages :

- BESPOKE (furniture, objects, exhibitions)

- STUDIO (public, residential)

Thank you in advance!

https://grasshopper-bagpipe-xnbp.squarespace.com

password : Architettura9439

On 1/20/2023 at 3:02 AM, SKPhotography said:

@tuanphanThank you! But the images look to be cropping to 16:9 - was there a way to change the code to retain the original aspect ratio?

You mean change to 1:1?

On 1/25/2023 at 9:24 PM, abian said:

hi 🙂 @tuanphan

I also have a similar problem.

I would like to set a customised aspect ratio, an even thinner rectangle than the ultrawide screen, so 48:9 (super-super ultrawide).  

I would like to have this setting only in all preview portfolio pages :

- BESPOKE (furniture, objects, exhibitions)

- STUDIO (public, residential)

 

Thank you in advance!

 

https://grasshopper-bagpipe-xnbp.squarespace.com

password : Architettura9439

 

 

Add to Furniture, Objects, Exhibitions, Public, Residential Page Headers

<style>
  .grid-image, .grid-item {
    padding-bottom: 18.75% !important;
}
</style>

@tuanphan Not 1:1 or one standard overall aspect ratio - only the original ratio of the image, for instance what aspect ratio the image was photographed in. I have a variety of image aspect ratios (4:5, 16:9, 2:3) in both horizontal and vertical orientations. 

Essentially, I'm looking for code that won't allow Squarespace to change the aspect ratio at all. 

On 1/30/2023 at 8:23 AM, SKPhotography said:

@tuanphan Not 1:1 or one standard overall aspect ratio - only the original ratio of the image, for instance what aspect ratio the image was photographed in. I have a variety of image aspect ratios (4:5, 16:9, 2:3) in both horizontal and vertical orientations. 

Essentially, I'm looking for code that won't allow Squarespace to change the aspect ratio at all. 

Add this to these page header

<style>
  .grid-image {
    object-fit: contain !important;
}
.grid-image {
    padding-bottom: unset !important;
}
.grid-image-inner-wrapper {
    position: static !important;
}
a.grid-item {
    padding: unset !important;
    height: auto !important;
}
</style>

Hi @tuanphan
thank you very much!

I entered the codes and it worked perfectly.

The only problem is that the scroll bars appeared on the side of each project only in the visualisation for the mobile. 
Could you help me remove them please ?

thank you 🙂