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;
}}
Result
B.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
