Fix: Squarespace Gallery Description not showing

Squarespace has 2 types of galleries: Gallery Block, Gallery Section.

so I will share how to fix the error gallery description not showing on both versions.

A.Gallery Section description not showing 

#1. First, hover on Gallery Section > Click Edit Section

#2. Enable this option

 

A.2. Gallery Section description not showing in Lightbox Mode

This is not a bug, but it is Squarespace’s default option. You can use this code to Code Injection – Footer to make description (caption) appear inside Lightbox mode.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script>
jQuery(document).ready(function($){
 var texts = document.getElementsByClassName('gallery-caption-content');
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(idx, ele){
        var text = texts[idx]
        var id = $(ele).attr('data-slide-url')
        if (text) {
            $(ele).append('<p id="' + id + '" class="light-caption sqsrte-small">'  + text.innerHTML + '</p>');
            
            if ($(ele).attr('data-active')) {
                $(`#${id}`).css('visibility', 'visible')
            }
        }
    })
    $('.gallery-masonry-lightbox-link').click(function() {
        var id = $(this).attr('href').split('=')[1]
        $('.light-caption').css('visibility', 'hidden')
        $(`#${id}`).css('visibility', 'visible')
    })
    $('.gallery-lightbox').click(function() {
        $('.light-caption').css('visibility', 'hidden')
        var id = location.search.split('=')[1]
        $(`#${id}`).css('visibility', 'visible')
    })
})
</script>
<style>
.light-caption {
    visibility: hidden;
    position: fixed;
  	font-family: source code pro;
  	color:grey;
    font-size: 14px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}
  .gallery-lightbox-item[data-active='true'] .light-caption {
    visibility: visible;
}
.gallery-lightbox-controls {
    display: flex !important;
  } 
</style>

B.Gallery Block description not showing

You can add Title and Description, but Description will not be displayed

• it is only show with some templates in 7.0 version
• or is it only show with Slideshow layout (screenshot below)
• Or Stacked layout
  B.2. Gallery Block description not showing in Mobile – Slideshow Format

Use this code to Custom CSS

@media screen and (max-width:900px) {
    .sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    left: 0 !Important;
    top: 100px !important;
    width: 100% !Important;
max-width: 100% !important;margin-left: 0 !important;}
.sqs-gallery-block-slideshow .meta .meta-title {
    line-height: 20px !important;
}
.meta-inside {
    padding-top: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta {
    height: auto !Important;
}}

ResultB.3. Gallery Block description not showing in Mobile Lightbox 

You can use this code to Custom CSS

/* Show lightbox caption */
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0,0,0,0.7) !important;
    bottom: 10px !important;
}

Result