Gallery Section Text Block Overlay

Gallery Section Text Block Overlay

License

Synopsis

Add styled text overlays to gallery section images.

Version

• 0.2.1

SS Version

• 7.1

Fluid Engine Compatible

• Yes

Dependencies

• Squarespace plan that supports JavaScript.

• jQuery

---

Install

• Add code from file gallery section text block overlay.less to Website > Pages > Website Tools > Custom CSS.

• Add the following to Website > Pages > Website Tools > Code Injection > HEADER.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

• Add code from file gallery section text block overlay.html to Website > Pages > Website Tools > Code Injection > FOOTER. Please see Per-page code injection.

• Add a section to a page.

  • There is no need to spend time changing the design layout of this section as the code will hide this section.

  • Add text blocks that you want to use as gallery section image text overlays. For Classic Editor only use line blocks to keep text blocks from collapsing together.

• Add a gallery section to a page.

  • Add the gallery section just before the previous section you created.

  • For Gallery Type select Slideshow: simple.

  • Turn the Captions on.

  • In the first image description add the following line.

    twc-gstbo
    

  • For each image you want to have a text block overlay set its description to a text block id. If you want an overlay for the first image add a line to the description that is the text block id.

    

    To find text block ids you can use a tool like Heather Tovey's most excellent looking Squarespace ID Finder.

Note

This effect is not active in SS Preview to test it use private browsing.

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

• 2023-08-28

  • fix for opacity issue
  • bumped version to 0.2.1

• 2023-08-27

  • add support for all Gallery Types
  • bumped version to 0.2.0

• 2023-08-27

  • initial version