Extract filename from image for widget customisation

Netlify CMS
1

Hi there,
I’m trying to build a widget for images which return a correct tag since I use Jekyll Picture Tag.

I feel I’m almost there, thing is I’d just need the filename from the object string and not the full url. How can I extract that please? I have no experience at all with React unfortunately.

I guess it’s a regex thing but not sure how to implement it :confused:

Here’s my code :

<script>
   CMS.registerEditorComponent({
     // Internal id of the component
     id: "jekyllPictureTag",
     // Visible label
     label: "Responsive Image",
     // Fields the user need to fill out when adding an instance of the component
     fields: [{name: 'id', label: 'Pick you image', widget: 'image'}],
     // Pattern to identify a block as being an instance of this component (not sure at all what's going on here)
     pattern: /^jekyllPictureTag (\S+)$/,
     // Function to extract data elements from the regexp match
     fromBlock: function(match) {
       return {
         id: match[1]
       };
     },
     // Function to create a text block from an instance of this component
     toBlock: function(obj) {
       return '{% picture ' + obj.id + ' --img class="img-fluid" %}';
     }
   });
   </script>

In the end, what I’d like is {% picture pictureName.jpeg --img class=“img-fluid” %}

Thanks for your help :slight_smile:

2

You might find this post on stackoverflow useful: