Jump to content

7.1 Bailard No Gallery Blocks?

Recommended Posts

Posted

Site URL: http://mywellness4all.com

Hello,

 

I am using 7.1 Bailard and trying to add a gallery block to my home page to get a slideshow, but there simply is no section for "gallery" under the "content blocks."

I looked at other online videos and screenshots and it shows the gallery section is supposed to be between "summary" and "image layouts." But, that isn't the case for me. See attached screenshot for visual.

 

Any help?

Screen Shot 2020-06-18 at 5.00.04 PM.png

  • 5 months later...
  • 6 months later...
Posted

Hi all,

I am having the same issue.
From what I have read, gallery blocks were removed, and the only option is section. But if I make a new section then I am unable to add a text block (or any other block) to that section.

Kate's add-on seems to be a good replacement option, but I find it ridiculous I have to pay for something that was removed...

Posted
On 7/6/2021 at 12:48 AM, babsandjojo said:

Hi all,

I am having the same issue.
From what I have read, gallery blocks were removed, and the only option is section. But if I make a new section then I am unable to add a text block (or any other block) to that section.

Kate's add-on seems to be a good replacement option, but I find it ridiculous I have to pay for something that was removed...

You can add a block under Gallery Section, then share link to your site. We can give some code to move that block into Gallery Section.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 year later...
Posted (edited)

This is close maybe someone could build off of it, but if you have a blog page with a gallery you can remotely load an existing gallery block into another page. For example

<script>
  $(function(){ $('.hawaii—gallery-block').load('/blog/best-things-to-do-oahu #block-yui_3_17_2_1_1680568493498_151664');
  })
</script>

<div class="hawaii—gallery-block"></div>

Only issue is, I couldn't get the images to show...

Edited by noahawaii
Posted
3 minutes ago, noahawaii said:

Only issue is, I couldn't get the images to show...

This could be because the images may be lazy loaded and that might require the page to load normally in the browser. The jQuery load method is not a web browser.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted
2 minutes ago, creedon said:

This could be because the images may be lazy loaded and that might require the page to load normally in the browser. The jQuery load method is not a web browser.

I thought it might be a security thing to prevent other sites from loading images hosted on SS

Posted (edited)

Okay I now have a working fix! Its a bit of a long shot, but it's what we got because SS only lets there be gallery blocks for Circle members...

First create a gallery like you want it in a blog post, then copy the entire HTML for the element in both desktop and mobile. You can just shrink down your browser until you see the gallery collapse to get the mobile. 

Then, save these in two separate spaces and wrap the desktop element in:

<div id="first-gallery" class="first-child">
  <!-- Content of the first gallery goes here -->
</div>

Then wrap the second (mobile) gallery in: 

<div id="second-gallery" class="second-child">
  <!-- Content of the second gallery goes here -->
</div>

Finally, put both inside of a code block where you want them to display along with: 

<style>
  @media (max-width: 767px) {
    .first-child {
      display: none !important;
    }
  }

  @media (min-width: 768px) {
    .second-child {
      display: none !important;
    }
  }
</style>

This will hide each respective gallery on screen where they shouldn't be.

Note: On the Desktop copy, you can start from <div class="sqs-block-content">, but on the mobile copy, you have to start from <div class="sqs-block gallery-block sqs-block-gallery" ...

This will remove extra padding caused by placing a gallery block inside of a code block, but on mobile, the entire element is essential to the styles.

 

Hope this helps!

Edited by noahawaii
  • 2 months later...
Posted (edited)

UPDATE: SS Re-did their gallery blocks, so now its actually easier. You can just copy and paste the entire HTML element from a blog post into a code block somewhere else and it all works great. No need to worry about the difference between mobile and desktop.

Edited by noahawaii
  • 6 months later...
Posted
On 9/13/2023 at 9:11 AM, noahawaii said:

UPDATE: SS Re-did their gallery blocks, so now its actually easier. You can just copy and paste the entire HTML element from a blog post into a code block somewhere else and it all works great. No need to worry about the difference between mobile and desktop.

Gallery blocks only available to Circle users, normal users won't see the block on 7.1 Classic section and Fluid section

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

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.