Jump to content

Embedding Petfinder Pet List Widget

Go to solution Solved by Ziggy,

Recommended Posts

I am trying to add Petfinder's Embeddable Pet List Widget to my site through an embed block in Squarespace.

When the widget is not in safe mode, the image cards in the widget are extremely large and the widget extends down to the very bottom of the Section. When I put the block into Safe Mode while editing the page, or if I preview the page, the image cards display at their correct size, which shrinks the widget size down substantially.

What this does, however, is leaves an extremely large gap below the widget to the end of the section. I can only adjust the embed box size when the widget is not in Safe Mode, so I am reducing it's height as much as possible, but when it is in Safe Mode and I can see the large gap below, I am unable to reduce the size of the embed box size to match the size of the live widget.

If there is a way to work around this, please let me know. I have tried the following code to see if it will allow me to reduce the embed box size, but when this code is applied, I am unable to reduce the box size to match the size of the widget:

html.squarespace-damask .sqs-blockStatus, .sqs-block .removed-script {
  display: none !important;
}

The site is here: https://www.catsinthecityny.org/adoptable-cats

and the password to access it is: 4Wh!skers

Here is the code for the Petfinder Widget used on the site:


        <pet-scroller
            type='["cat"]'
            age='[]'
            limit="8"
            hidebreed
            status="adoptable"
            petlisttitle=""
            organization="NJ994"
            apibase="https://api.petfinder.com"
            petfinderurl="https://www.petfinder.com"
            accesstoken="eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJtd1NmUDQ1SEpPckFSS0RkVGM1M3JGSjNHVTJIdnk0SUxVSGR5Y3NnNGpURzRCVHIzdCIsImp0aSI6IkxGWksyVXVSQ1cwVjd0aW8xNHVvcml1R2FXSmNsd3BITTk0V3ZJVG4iLCJpYXQiOjE3MjQ5ODk4NzMsIm5iZiI6MTcyNDk4OTg3MywiZXhwIjo0ODgwNjYzNDczLCJzdWIiOiIxNzMwNzYyNiIsInNjb3BlcyI6W119.kL04NSosDUbOJ9NwhDp27r0wnfa3mT7Yj2aswKfUV_42rXFTk4GHZqfbgIjqfzfToBviWz6BSbd_R1JplBI1WTvyJkj2x4T70Szh21rMi_obKvm5jwSJ6vHsPyQazlmAcNazqvu4tX_Pup32gj2MruQylLBRxRhUXpCXlQO05rt1shfAr5dIZHnY6J3YgNZdGeDW-vhrVPGac-6qSeFe5IjTxx0YjDImaVU9pJwn2tdDs6pCT0Kt_Z2smPFvHULPylnGPwahmG_wCbz20mqMao-fDieGDHxQJ-WNY2FVRSZBUC6F1k-Z08kTEcv5GDKzagtDVqDDuRTvV7bUXNdPuA">
        </pet-scroller>

        <script src="https://www.petfinder.com/assets/widgets/scripts/main-widgets-web.js">
        </script>
    

Thank you for your help.

Edited by SeanWGordon
Link to comment
  • Solution

The code doesn't really behave properly when in edit mode. If you remove the code block, reduce the rows to 1, then add a code block 1x24, paste in the code, and then save and exit. (don't try to move or resize the block after pasting in the code.) That seems to have the benefit of stretching the one row rather than adding more which causes the excess rows problem.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Amazing! That worked perfectly, thank you! The sizing is now where it needs to be and I don't need to do any complex workarounds.

Thank you for your quick response and finding such an easy solution to a problem I've been having for days.  Your help is greatly appreciated.

Link to comment
20 minutes ago, SeanWGordon said:

Thank you for your quick response and finding such an easy solution to a problem I've been having for days.  Your help is greatly appreciated.

The simplest solution is always the best!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.