Jump to content

Altering Image Size, Positioning, Cropping, and Scaling within a Gallery Slideshow (Aspect Ratios Differ Greatly)

Go to solution Solved by GeothermalCanada,

Recommended Posts

Here is the webpage in question: https://www.geothermalcanada.org/corporate-members
I'm using Bedford 7.0

Here's the code I used to increase the height of the slideshow pane:

<style>
 .sqs-gallery-block-slideshow {
   height: 30vh
  }
</style>

I need the images inside the slideshow to do all of the following:

  • scale up to match the width of the pane
  • center vertically
  • maintain their aspect ratio

And I need the description (when hovering the mouse over the image) to be flush with the bottom of the pane. There also seems to be a needlessly large margin between the top of the text box and the first line of the text; I'd need that margin to be shrunk to be closer to the text.

I tried clicking the "automatically crop images" option within the slideshow options, and while it scales the images to the width of the pane, it also crops the images too aggressively, in a way that I can't seem to do anything about. It also presses the images against the top of the pane instead of centering them.

However, I understand that, no matter what, tall images are going to be too tall for the pane once they are scaled up, and will be cropped to fit the pane. I'm fine with that.

Any help is very much appreciated.

Edited by GeothermalCanada
Removed unnecessary parts
Link to comment

I rectified the situation by painstakingly editing each image one by one to add white space above and below, and replacing it into the collection with its description and clickthrough link. Doing this made the images show properly without being cropped to oblivion. However, I feel like this time consuming process shouldn't have been necessary. Here's the code of the images when the page is looked at in browser and the "inspect" feature is used:
 

<div class="sqs-gallery sqs-gallery-design-stacked"
     id="yui_3_17_2_1_1702929853173_573"
     style="height: 349.996px;">

There should be an entry box directly in the edit slideshow options, letting you directly enter the height you want the images to be cropped at. The "height: 349.996px;" should be easily changed to whatever you want it to be.

Edited by GeothermalCanada
Link to comment
  • 1 month later...
  • Solution

Great news!! I finally figured out a way to make gallery slideshow blocks work much better than before. Here's the CSS that makes the difference; copy and paste this into your page code header (or site CSS page without the style tags):

<style>
  .sqs-gallery.sqs-gallery-design-stacked {
  height: 478px !important;
  max-height: 50vw !important;
  }
  .thumb-image.loaded {
  width: 100% !important;
  max-width: 956px !important;
  left: 0px !important;
  object-fit: contain !important;
  }
</style>

And of course you can play around with the values to suit your needs and specific situation. Hope this helps some people.

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.