Jump to content

SS7.1 - Want Images NOT cropped. Images are 2:1 aspect ratio but Format for 2.1 apect ratio not available in interface

Recommended Posts

  • Replies 8
  • Views 704
  • Created
  • Last Reply

Your site is password protected, please give the temp password so we can provide a custom code to get over with

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

We can take advantage of current widescreen option to make it always 2:1 ratio

.tweak-portfolio-grid-basic-image-aspect-ratio-ultra-widescreen .portfolio-grid-basic .grid-image {
    padding-bottom: 50%;
}
.gallery-grid[data-aspect-ratio="widescreen"] .gallery-grid-item-wrapper {
    padding-bottom: 50%;
}

Place it on Settings->Design->Custom Css

image.thumb.png.5b3ebb22f8b4ab30a561310df90f8c2f.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi Thanks for your assistance

This CSS code seems to work by modifying the aspect ratio of the widescreen format. Rather than writing CSS code is there a way to add a 2:1 aspect ratio as an actual clickable independent option within this interface as this is a useful aspect ratio.

Also this provided CSS code does not affect other images that are not on this particular gallery page. (ie click "from work with atelierjones" and the following images are cropped.  Is there a way to have all images on the website be given a prescribed 2:1 aspect ratio that is not cropped or when they are not 2:1 for them to also not be cropped.

Thanks again for your help

Link to comment

unforturnately it not become a default option as squarespace did not add it into the dropdown

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
.tweak-portfolio-grid-basic-image-aspect-ratio-ultra-widescreen .portfolio-grid-basic .grid-image {
    padding-bottom: 50%;
}
.gallery-grid[data-aspect-ratio="widescreen"] .gallery-grid-item-wrapper {
    padding-bottom: 50%;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

 

So regarding my second question:

The provided CSS code does not affect other images that are not on this particular gallery page. (ie click "from work with atelierjones" and the following images are cropped.  Is there a way to have all images on the website be given a prescribed 2:1 aspect ratio that is not cropped or when they are not 2:1 for them to also not be cropped?

Thanks

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.