Jump to content

Custom Coding to resize image blocks on a specific page

Recommended Posts

Site URL: http://www.stevegallagher.com/

Hi Guys,


I was wondering if someone can help me out....


I'm working new page and I'm having trouble trying to scaling the thumbnails to the correct size. I would like them to be the size of the blue box but as default the page has the grey box set to a specific size. Also to adjust the padding around it.

I'm using the New Page > Images> Horizontal Masonry.


How can I write a code and place it, just for this page to turn the grey box's into the blue size? (there will be just 3 images per row)
Blue box image size is H: 181 pix  /  W: 322 pix.  If that helps

Should the code go into the page in the advance section?

See below: Thanks in advance

 

Screen Shot 2020-10-28 at 21.33.51.png

Link to comment

What is the page with the different image size? I checked all your navigation but still not found it yet

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 minutes ago, SteveG03 said:

Hi Bangank,

It's not a live page. I've mage the page live now.  I'm just trying to work out how to write the code for it and where to place it.

Thanks

Here is my trick, this way it can be applied on one page only instead of the whole site

1. You need to add below script on your page custom code 

2. Since you got your image dimension, use this formula

ratio = height / width --> 181/322 ~ 56.2%

3. Replace the value in this snippet

<style>
	.sqs-block-image .sqs-empty .sqs-image-content {
      padding-bottom: 56.2% !important;
    }
</style>

image.thumb.png.e5f80b0ef303a2614407def50645e319.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...

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.