Photograffix

In order to get the captions to show you need to add the JS code as per this comment https://forum.squarespace.com/topic/151777-gallery-caption-workarounds-for-71-round-two/?do=findComment&comment=333248 To change your CSS to match your site styling for the lightbox caption, you will need to add this to your custom CSS .gallery-item-description { font-family: orpheus-pro; font-weight: 400; font-style: normal; letter-spacing: 0em; text-transform: none; line-height: 1.6em; font-size: 14px; color: white; }

Hi @Wisam - The URL you provided doesn't exist. Let us know which page you want us to check and which code you have injected.

@Rah971 Can you share the site URL and password?

Not sure why it wasn't working when I first looked but it looks like it's working now.

Hi @amsperle I checked your site amsperle.com and inspected the code; the code you quoted in your post is missing. It so looks like it hasn't been injected - so check your Custom CSS and add the font-face code again and click "Save" The good news is that I tested your font-face code, and the URL for the font is working. Let me know if you get it working.

Hi 👋 I have added a button to toggle the display of the captions for the masonry gallery using the following code. <script> $(function(){ $('#block-yui_3_17_2_1_1686230394275_3985 a').on('click', function(event){ event.preventDefault(); $('.gallery-caption').toggle(); if ($('#block-yui_3_17_2_1_1686230394275_3985 a').text() == 'Hide Captions') { $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Show Captions') } else { $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Hide Captions') } }) $('.gallery-caption').hide(); $('#block-yui_3_17_2_1_1686230394275_3985 a').text('Show Captions'); }) </script> The toggle works, but I need to re-initialize the masonry grid to allow the captions to occupy space between the items. Does anyone know the code that will achieve this? It must be used in the Squarespace code already, as the masonry grid will re-initialise if you change the browser's width.

@tuanphan & @brandon, I developed a fix to add HTML tags to the gallery item description. In the description for the photo, I use spanClose, spanDes and spanID, which the JS below then replaces with </span>, <span class="comment-desc"> and <span class="comment-image-id"> For example, the following description text Makgadikgadi Meerkat spanDes A family of meerkats, Makgadikgadi Pans, Botswana. spanClose spanID Image ID: WBL-Makgadikgadi-Meerkats-140121045120 spanClose becomes Makgadikgadi Meerkat <span class="comment-desc"> A family of meerkats, Makgadikgadi Pans, Botswana. </span> <span class="comment-image-id"> Image ID: WBL-Makgadikgadi-Meerkats-140121045120 </span> You can then target the new classes with CSS., eg. .comment-desc{ display:block; //forces new line } Script to add to the footer <script> document.addEventListener("DOMContentLoaded", function() { var descriptions = document.getElementsByClassName("gallery-item-description"); for (var i = 0; i < descriptions.length; i++) { descriptions[i].innerHTML = descriptions[i].innerText.replace('spanDes', '<span class="comment-desc">').replaceAll('spanID', '<span class="comment-image-id">').replaceAll('spanClose', '<span>'); } }); </script>

@tuanphan @brandon I've got this working and displaying the captions 🙌 , but the JS code strips out any HTML tags in the description. I add HTML to the description for extra styling and paragraph spacing e.g. Makgadikgadi Meerkat <span class="comment-desc">A family of meerkats, Makgadikgadi Pans, Botswana.</span> <span class="comment-image-id">Image ID: WBL-Makgadikgadi-Meerkats-140121045120</span> I've looked at @brandon's JS, but I am unsure how to update it to maintain the HTML. Here is an example page: https://wildlife.photograffix.co.uk/birds?itemId=g0tle8zyd74qkwo7j8i03b4vqj71ud On this page, the caption should display as the attached image if the HTML tags remain in place. Can you offer any help, please? Thanks Marco

@Borisruth It uses a template called Forte. https://www.squarespace.com/templates/forte-demo