Skip to content

README.md

Latest commit

 

History

History
192 lines (118 loc) · 6.48 KB

README.md

File metadata and controls

192 lines (118 loc) · 6.48 KB
Raw

Gallery Section Text Block Overlay

License

Synopsis

Add styled text overlays to gallery section images.

Version

  • 0.3.0

SS Version

  • 7.1

Dependencies

Install Options

  • CDN Hosted

    Use this option for the quickest way to install this effect (files hosted externally on the jsDelivr, a CDN)

    • Options

      • Page Specific

        Use this option if you want to have this effect on only one Page.

        • Add code from file gallery section text block overlay options.html to Page Settings > Advanced > Page Header Code Injection for the Page. Read the code for instructions within.

        • Add the following code to Page Settings > Advanced > Page Header Code Injection for the Page.

          <!-- begin TWC Gallery Section Text Block Overlay -->

  <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
  
  <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@012e513c67e092e7878f1a74a0813624c2d0cec4/v7.1/Section/Gallery/Gallery%20Section%20Text%20Block%20Overlay/gallery%20section%20text%20block%20overlay.min.css" rel="stylesheet" type="text/css">
  
  <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@012e513c67e092e7878f1a74a0813624c2d0cec4/v7.1/Section/Gallery/Gallery%20Section%20Text%20Block%20Overlay/gallery%20section%20text%20block%20overlay.min.js" type="module"></script>
  
  <!-- end TWC Gallery Section Text Block Overlay -->

        • Refer to per-page code injection for details.

      • Site-wide

        Use this option if you want to have this effect on all Pages.

        • Add code from file gallery section text block overlay options.html to Website > Pages > Custom Code > Code Injection > FOOTER. Read the code for instructions within.

        • Add the following code to Website > Pages > Custom Code > Code Injection > FOOTER.

          <!-- begin TWC Gallery Section Text Block Overlay -->

  <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
  
  <link href="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@012e513c67e092e7878f1a74a0813624c2d0cec4/v7.1/Section/Gallery/Gallery%20Section%20Text%20Block%20Overlay/gallery%20section%20text%20block%20overlay.min.css" rel="stylesheet" type="text/css">
  
  <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@012e513c67e092e7878f1a74a0813624c2d0cec4/v7.1/Section/Gallery/Gallery%20Section%20Text%20Block%20Overlay/gallery%20section%20text%20block%20overlay.min.js" type="module"></script>
  
  <!-- end TWC Gallery Section Text Block Overlay -->

  • On-site

    Use this option to install the full code of this effect (files hosted on your site).

How to Use

  • Add a Gallery Section to the Page.

    • Turn Captions on.

    • In the first image Description add the following line.

      twc-gstbo

  • Optional

    This code supports using Text Blocks for Descriptions.

    • Add a section to the Page after the Gallery Section.

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

    • Add Text Blocks that you want to use as the Gallery Section image text overlays. For Classic Editor only use Line Blocks to keep Text Blocks from collapsing together.

    • 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.

      first image description

      To find Text Block IDs you can use a tool like Heather Tovey's most excellent looking Squarespace ID Finder.

Demo

You can see a demo of this effect here.

Make a Donation

Please consider making a donation.

Changes

  • 2026-08-29

    • reworked code to not remove native captions
    • restructured the code
    • removed jQuery dependency
    • bumped version to 0.3.0

  • 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