Filename as image title

[studiomycel]

Hi, I'm using Chocolat to view all photos in a directory. Since I'm opening the viewer automatically I don't have the ability to enter individual captions for each image and were wondering if it's possible to have the filename displayed at the chocolat description instead?

All the best, C

[nicolas-t]

Hello,

You could try something like this :

Chocolat(document.querySelectorAll('.chocolat-image'), {
    description: function () { 
        const currentImage = this.settings.images[this.settings.currentImageIndex]
        // if you want the full path:
        return currentImage.src
        // or if you only want the filename:
        // return currentImage.src.split('/').pop()

    }
})

[studiomycel]

Thank you for your response! It's something like this I'm looking for 🙂

However I can't get it to work. When I added the full path-version it doesn't return anything at all, and when I tried the split-pop version I get the following message:

Uncaught (in promise) TypeError: Cannot read property 'src' of undefined at Chocolat.description (?dir=Fungi/2020/Photos:47) at chocolat.js:312

I understand that this is not officially supported and therefore I'm not expecting any further support but here is a link to my website where I'm trying to implement it https://christopherlandin.com/?dir=Fungi/2020/Photos

Thanks for your help, I'm going to continue trying!

All the best, Christopher

[nicolas-t]

Oops I made a mistake, this should be working.

Chocolat(document.querySelectorAll('.chocolat-image'), {
    description: function () { 
        const currentImage = this.images[this.settings.currentImageIndex]
        // if you want the full path:
        return currentImage.src
        // or if you only want the filename:
        // return currentImage.src.split('/').pop()
    }
})