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
  • Replies 4
  • Views 881
  • Created
  • Last Reply

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

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

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

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.