Fluid Image Caption

Description: adding caption to Fluid Image (Image Block)

Note: When use Fit Image, space between text and image will be a bit wide.

#1. Install Code

You can hover on Page where you use Image Blocks > Click Gear icon

Click Advanced > Paste this code

<!-- Fluid Image Caption -->
<script>
const config = {
    position: 'above',
    separator: '##'
};
document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.image-block img[alt]').forEach(function(img){const altText=img.getAttribute('alt');if(altText&&altText.trim()!==''){const sqsImage=img.closest('.sqs-image');if(sqsImage){const existingSpan=sqsImage.parentElement.querySelector('.alt-img');if(!existingSpan){const container=document.createElement('div');container.className='alt-img';if(altText.includes(config.separator)){const parts=altText.split(config.separator);const span1=document.createElement('span');span1.className='alt-part-1';span1.textContent=parts[0].trim();const span2=document.createElement('span');span2.className='alt-part-2';span2.textContent=parts[1].trim();container.appendChild(span1);container.appendChild(span2)}else{container.textContent=altText}if(config.position==='above'){sqsImage.parentElement.insertBefore(container,sqsImage)}else{sqsImage.insertAdjacentElement('afterend',container)}}}}})});
</script>

Next, edit Image > Add caption text to ALT

#2. Customize

#2.1. To make text above image, like this.

change text: below to above

const config = {
    position: 'above',
    separator: '##'
};

#2.2. To break text to 2 lines, like this

First, add this code under main code

<style>
div.alt-img span {
    display: block;
}
</style>

Next, add ## symbol to ALT

Bright sunlight warmed ## the quiet park this morning.

#2.3. To change space between Text – Image

You can add this under main code

<style>
div.alt-img {
    margin-bottom: 30px;
}
</style>

If you have multiple style code, you can merge them like this

<style>
div.alt-img span {
    display: block;
}
div.alt-img {
    margin-bottom: 30px;
}
</style>