Jump to content

Creating custom aspect ratios for portfolio page

Recommended Posts

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:
290206572_ScreenShot2021-12-02at2_21_52PM.thumb.png.175092332c432f902acbffe22fd9c448.png

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.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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".

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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 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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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

 

 

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

Screen Shot 2023-01-19 at 12.01.34 PM.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

@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. 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.