CODEWITHSUNDEEP
htmlcssimagesquarespace
Lazarius
Lazarius

Reputation: 53

Customising Image size and padding in Squarespace

I've had the misfortune of inheriting the task to update my company's website with our newest members. Due to this being a small company, the previous guy did not leave any documentation or notes based on how he created the website.

Essentially right now we have a members page that contains Image Blocks (Inline, with captions). Click here to get to the page in question.

I'm trying to add a new member in, but it seems like the previous guys has had some sort of customisation. Adding a new image block immediately showed to me that the current blocks are very different to the default ones that squarespace has. See here for a staging page I created, with the newest image block (Simon McLean) on the very bottom right.

Took me hours to figure out that Squarespace actually resizes your images upon import to an image block. So I inspected the elements on Chrome and found the below elements to change. Below are screenshots from before the change to the elements to after the change in the elements:

Before: Before Element Changes

After: After Element Changes

Note that I got the changes by simply looking up the image next to the one used in the example (i.e. Example is Anna's Image and I'm trying to fix Simon's image).

Pardon the noob question, but how do I make these changes permanent? I've so far tried the following:

  1. Modified the Custom CSS via the Design > Custom CSS using the below code. No discernible effect. 
element.style {
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    position: absolute;
    padding-bottom: 100%;
}
  1. Used the above code, but this time as a Page header injection. Still no effect.

I'm honestly out of ideas - Thank you for helping me. I'm definitely out of my depth here.

Upvotes: 1

Views: 5226

Answers (1)

Brandon
Brandon

Reputation: 3707

There are two ways to solve the problem you describe.

1) Resize the original image of Simon to the same size as the other original images (240x240) before you upload it. You may need to add a new, empty image block (instead of simply uploading the new image over the old one in the existing image block) because the old block may retain its undesirable settings/aspect ratio.

2) Use the "handle" at the bottom of the image to set it's height/aspect-ratio to your preference.

enter image description here

A third option would be use CSS and force the padding-bottom to the desired height/aspect-ratio, but that's hopefully unnecessary.

Note that the original images, being 240x240, will not appear sharp on high-resolution displays. Ideally, the images would have been uploaded at a much higher resolution, allowing Squarespace to determine the best resolution to deliver based on the display. Ideally, all such images would be reuploaded at some point.

Upvotes: 3

Related Questions