Beyondspace

Sent, thanks for the boilerplate

The lightbox stinks. It has zero scrolling capabilities. Even Adobe Portfolio has that ability. So if you want to show tall images, say a website page you designed, you're pretty much screwed. You have to show the whole thing on the page which takes up a ton of room and forces users to scroll to see other images. For a service that touts being a gallery for portfolios, this should have been fixed ages ago.

Gallery Block is one of the most wanted feature on Squarespace 7.1, for the last few days I thought Squarespace dev team decided to bring it back but it turns out a 'mistake' and now it gone again!
So I created this snippet to bring the feature to include the gallery into section's block using code block and gallery section.
There a few steps you need to follow
1. Create a gallery section and grab it's section id, using this extension:
example: section[data-section-id="5fad1f27e741ef42c9a8a4a3"]
Squarespace ID Finder - Chrome Web Store (google.com)
2. Create a Code Block where you wanted the gallery to show up, add this code snippet 
<div class="gallery-placeholder" data-target='{gallery-section-id}'> Gallery Block Name (optional) </div> whereas
- {gallery-section-id} should be replace with the section id you got above
- Gallery Block Name: this is optional, you can place it to identify which section will be replaced in the block position
3. Add these snippet into Settings->Advanced->Code Injection, note that the stylesheet can be place into Design->Custom CSS
<style> /* Override all the gallery section style */ .gallery-placeholder * { background: inherit; } .gallery-placeholder .gallery-section { padding-top: 0 !important; min-height: inherit !important; } .gallery-placeholder .gallery-section .gallery-grid, .gallery-placeholder .gallery-section .gallery-reel { padding: 0 !important; } .gallery-placeholder .section-background { display: none; } </style> <script> document.addEventListener('DOMContentLoaded', function() { if ( window.location !== window.parent.location ) { // The page is in an iframe return; } else { // The page is not in an iframe var galleries = document.querySelectorAll(".gallery-placeholder"); for (var i = 0; i < galleries.length; i++) { galleries[i].innerHTML = ""; var target = galleries[i].getAttribute("data-target"); if (document.querySelector(target)) { galleries[i].appendChild(document.querySelector(target)); } } } }) </script> Check out the outcome here
https://beyondspace-showcase.squarespace.com/gallery-demo?password=1234&utm_source=squarespace_forum&utm_medium=topic&utm_campaign=promo
 

I want to revamp our "about us" page by having circular profile pictures but I can only do that with the Image Shape function.
The problem is the team biographies are very long and I'd like to have a scrolling lightbox come up when you click on each profile pic, like this - https://www.dublinschool.org/admissions/
But how do I do that and still have each image be circular and not square?
PS: I don't have any coding experience but open to learning. I've tried googling but not getting a clear answer.

Thanks @tuanphan. It's very strange but I don't seem to get those options all the time, they seem to be hidden. But after going in and out of the settings about 20 times, they appeared.
I just wasn't seeing them. Anyway all sorted now, thank you.
 

I am inheriting control of a Squarespace website using version 7.1. I need to add some slightly complex Javascript code to one of the pages. I have 6 different Javascript files and I am using 10 different NPM libraries. 
The functionality of the page is for the user to input a website and then the JS code will scrape the website and do some analysis on that website.
My question is - What is the best way to handle this situation?

I've been adding product photos to my shop and each photo added appears behind the previous image in the product gallery. I'm using png since that are already added to my site for other uses, do I have to upload separate images with a white background for use in the shop? I'd really rather not have to create, save, and add two versions of each product photo for my entire inventory.

Try adding to Home > Settings > Advanced > Code Injection, choose footer
<script> (function() { window.addEventListener('DOMContentLoaded', () => { const backEventLink = document.querySelector('.eventitem-backlink'); if(backEventLink) { backEventLink.setAttribute('href','/booking'); } }); })() </script> Let me know how it works on your site
Support me by pressing 👍 if this useful for you

Do you want something similar to this?
 
Kapture 2024-02-26 at 11.38.06.mp4

@Beyondspace just wanted to say THANK YOU 🙏🙏🙏. I am used to LeadPages and there it is soooo easy to hide sections. But while I do love SquareSpace, I had a scenario where I needed to hide or show sections, and your code is so perfect. 
I love how it makes it semi-transparent in edit mode. Unlike other code snippets I found which hide it completely.

Wow, thank you for this.  This is great when the site is live and I have to do live updates, I can still work on it but no one sees it and then just remove the code.  Awesome

Can you share the code you're using or a screenshot of how you've got it set up in the back end of your site? You can definitely use embed codes in Squarespace using the code block but you may be trying it a different way

Is there a way to make captions appear only in the lightbox when pressed in the photo gallery? I keep searching other threads and I keep injecting CSS through the Website > Website Tools, and nothing changes on my site at all. I also only have the personal plan so I cannot use Java.
I really like the "Wells" template and how the photo captions appear on the corner of the site, and I'd love to implement something like that into mine.

For the admin UI freebies, you can install it via Tampermonkey, which can help inject the user script into your website, follow steps in attached video. 
Note for Tamperscript: seeking for adviced if you are about to insert any of new scripts to your site
PS: in the tamperscript edit, make sure to update the @match line correctly, eg: your site url is https://denim-sturgeon-949p.squarespace.com/, then the value should be
// @match https://denim-sturgeon-949p.squarespace.com/*
Tamper.mp4

Unfortunately, this did not work for me because I am on a personal account. Is there anyway to get this to work on a personal account?

Thanks! Works great for me.
 
 

Try adding to Home > Design > Custom Css
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content { background-image: unset; } Support me by pressing 👍 or marking as solution if this is useful for you

Hi Everyone,
From everything I've been reading, it sounds like SquareSpace removed the ability to create a carousel style gallery of videos in 7.1.  I'm looking for a way that doesn't require CSS to do this, since I plan to subscribe to the basic personal plan.  It seems odd they would REMOVE a feature with the latest engine, but if there's not an easy workaround I'll probably just look elsewhere for my website hosting.  Thanks!

You can ask a Circle Member to add video carousel block for your site. If you need, you can add me as a contributor, I can add it for you, then you can remove me then.

Hi,
I'm looking to see is there any way to still build a video carousel in Squarespace? From what I can see, the carousel option has been removed where you could add both images and videos. I don't mind if I have to use uploaded or linked videos really.
I'm on the personal plan for my website.
Cheers,
David.

We'd love a solution to this. Video blocks and video pages won't do the trick for portfolio sites.

I am a musician and need to have a song list on a page.   This should have 2 columns (song and artist), and then to be ordered by song name or artist name.  
What's the best way to do this?  Ideally free (ie not a paid plugin or code), not super complicated and with the ability to easily add more songs to the list.
Thanks for your help

I have good news! With my Classic Gallery block, now you can add Gallery into 7.1 sections
https://beyondspace-showcase.squarespace.com/classic-gallery-block
Check the table for detailed supported areas

Can I please get an answer about why I don't have the Lightbox Studio Playground functionality that I thought I paid for?

Hi @tuanphan
So I think the problem is that I need to reduce the size of the images within the Lightbox.
As you can see in the screenshots, when I reduce the browser the caption goes below the image rather than on it.
Would you know a code to reduce the images when opening them up in Lightbox?
Thanks