laura_c

Hi all,

For any Melbourne or Victorian designers, I'm arranging a very casual meetup in Melbourne on Tuesday 26 March from 5.30-7.30pm @ The Duke of Wellington (146 Flinders Street, Melbourne).

It will be a great opportunity to network and chat about all things Squarespace.

Would love to see you there! Email me at laura@hatchlabs.com.au if you're keen.

Hi all,

I'm arranging a meetup in Melbourne on Friday 28 April from 5.30-7.30pm @ State of Grace in the CBD.

It will be a great opportunity to network, chat about all things Squarespace and swap stories - and generally get out of our respective suburbs!

Would love to see you there!

RSVP here

SQS Mods also have a plugin that does just this. It allows you to create a button with any text that opens the copy. I've implemented it on projects and it works really well.

https://www.sqsmods.com/list-expand

I'd also love the background gallery functionality from 7.0 to be added back into 7.1. Adding static text or other content over a slideshow background is such a common request.

Anyway, after much trial and error I've found a solution that - while not perfect - does the trick.

1. Create a gallery section. Set the gallery type to to Slideshow:Full. Set the section height, hide the controls and turn autoplay on.
2. Create a second section that sits below the gallery section. Set the section height the same as the gallery section. Don't upload any background images, videos or art. Add your text/button/content.
3. Add the following code to CSS, replacing the section id number with those of your second section. If you don't already have a Chrome extension to help you quickly see section and block ID's, I can recommend Squarespace ID Finder by Heather Tovey. 

body:not(.sqs-edit-mode-active) section[data-section-id="60bd6308fec0673d7ddd4a41"] {
  position: relative !important;
  margin-top: -100vh !important;
  background-color: transparent !important;
  .section-background {
    background-color: transparent !important;
  }
}

Basically, it removes any background colour from your content section and moves it up to sit over the gallery section. It doesn't apply in editing mode, so all content remains easily editable. It should work on all screen sizes, but let me know if it's not scaling correctly.

It's a hack that we shouldn't need - but for now, I hope it helps someone.

On 8/22/2021 at 3:23 PM, tuanphan said:

Create a .js file on your pc >> paste this code (no <script> tag)

Suppose the file name will be: reel-autoplay.js

$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});

Next, upload js file to your site.

Final, add this to Code Injection > Footer

<script>
	document.addEventListener('DOMContentLoaded', function() {
      if ( window.location == window.parent.location ) {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = '/s/reel-autoplay.js';    

          document.getElementsByTagName('head')[0].appendChild(script);
      } else {
          console.log('iframe');
      }
  });
</script>

 

@tuanphan, you're a lifesaver! I had to remove the [0] from the script before uploading (in case someone else uses this). But it's finally all working.

Thanks so much for your help. I couldn't be more grateful.

Thanks @tuanphan. This is working now. But it has a strange side effect. The script now seems to be triggering the editing mode whenever the page is selected in the backend.

Any ideas?

There is no site theme option in the desktop editor. But you can change this in the Squarespace mobile app.

Site URL: https://magenta-harp-d43d.squarespace.com/venues

I'm building a site for a client. One of the pages contains two gallery reels. I've installed some jquery code that automatically advances the gallery reel. It's working for the first gallery on the page, but not the second.

Can anyone give me some help on how I need to amend the code to work on all instances of gallery reel on the page? @tuanphan, do you know how this might be achieved?

URL: https://magenta-harp-d43d.squarespace.com/venues

Password: Happiness2021!

<script>
$(function(){
  window.setInterval(function(){
    {$("html:not(.sqs-modal-lightbox-open) body:not(.sqs-edit-mode-active) .gallery-reel-control:nth-of-type(2) .gallery-reel-control-btn")
    [0].click()}     
  }, 2000);
});
</script>

@ChrisSE I've figured out a way to do this.

Open up the Squarespace app and click on 'Edit' in the top right corner, then click the paintbrush icon. Click on 'Colours', then 'Site Theme'. From here you can set the default theme for the site.

Crazy that this workaround is needed. Here's to hoping that Squarespace add this back in again soon.

@ArminB, I've figured out a way to do this!

Open up the Squarespace app and click on 'Edit' in the top right corner, then click the paintbrush icon. Click on 'Colours', then 'Site Theme'. From here you can set the default theme for the site.

Crazy that this workaround is needed. Here's to hoping that Squarespace add this back in again soon.