CMS load solution interfering with my script to use the CMS title field as a caption for multi images

Hi there, i’m using the CMS load with my collection list, where I have images with captions, and I’m using a script to fetch the title of the cms item as the caption of that image in a lightbox element on the page

The problem is that when I load more items, the newly loaded items dont get the caption displayed like the ones that are already there when the page loads

So basically the script is not working for newly loaded items

I already have the attribute fs-cmsload-resetix=“true”

Here’s my read-only link: Webflow - Alalong

Here’s the published page: Projects | Rendering & Visualization

I’d be very grateful to receive some help on this!

Hey @gabriel.babus! You will need to use the CMS Load callback function to rerun the snippet each time new items are rendered. The basic structure is this

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      // Code here will run for the first page of the collection list

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        // Code here will run each time we render more 
        // items by pagination, infinite scroll or load more

      });
    },
  ]);
</script>

Let me know if you face any issues and I’ll be happy to help!

Thanks so much for the reply, Luis. Would you be kind and help me tailor this CMS load callback function to my use case, including the script I need to fire for the caption text to appear?

I’d be extremely grateful!

Hey @Support-Luis any chance I could get your help on this? Let me know! Thanks a ton

Hey @gabriel.babus! Sure!

Can you please help me find the code you already have running? I can’t seem to find it on this page → Projects | Rendering & Visualization

Hey @Support-Luis how’s it going? Apologies for the late reply here

Here’s the code I need to make it work along with the CMS load attributes solution

It’s installed in the head of the page

THanks @gabriel.babus! I am unfamiliar with Sygnal Attributes, so I’ll need more info here. What are you using the library for? Do you know if they offer an API callback function?

Also a Loom to show the elements that get the caption correctly and the ones that don’t would be very useful

Thank you!

Hey @Support-Luis the script is so I can make the ALT text of the image from the multi-image CMS field, the caption of the image inside the lightbox

See the screenshots

That’s it

Any chance you could have a look, @Support-Luis ? Thanks in advance!

Hey @gabriel.babus! Could you please share a test page where the list is set with CMS Load? I see the script commented out as well as the list loading all at once

Hey @Support-Luis how’s it going?

Here’s the page with the CMS load script active, and my script for the issue at matter

So once you click “next” to load more, the items that appear don’t trigger the script that adds the alt text as the caption of the image, inside the lightbox when you open

Can you help me out here? I’d be extremely grateful!

Cheers

Hey @gabriel.babus! I can see it now, I have to look and see if SA5 provide a way to initialize their library with code.

The final result should look something like this

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        sa5.init(); // supposing there is an access to this
      });
    },
  ]);
</script>

I’ll check and get back to you :muscle:

Thanks @Support-Luis appreciate the support a ton!

I’ve added the script above and published (same page) but it doesn’t seem to work, out of the box

I’m sorry @gabriel.babus! That was not supposed to be a working code!

I am still looking into the SA5 library trying to find an init function. I am not sure if this library has an API where we can interact with the scripts as we do for CMS Load.

I’ll keep looking and get back to you :wink:

Ohh, got it @Support-Luis . I’ll be waiting for your reply

Thanks so, so much for taking the time to help me with this, regardless! :pray:

Hey @Support-Luis how’s it going? Hope you’re having a great week!

Luis, any chance you could have a look at this thing by the end of this week? I’d be super grateful :pray:

Hello @gabriel.babus! Apologies for the delay. I did find a code line here that is supposed to reset the Lightbox functionalities, but it seems to not be working as it should, as I get an error every time I try to use it.

In theory, the code to reinit the captions would be this

<script>
  window.fsAttributes = window.fsAttributes || [];

  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        window.sa5.Sa5Lightbox.resetLightbox();
      });
    },
  ]);
</script>

I’ve reached out to SA5 support but I’ve gotten no answer. You could give reaching out a shot as there is not much I can do I am afraid :frowning: