Issue #957Opened March 15, 2018by Coyote60 reactions

[Question] Add custom attributes (data-) to assets/images on Upload/Selection

Question

Hi, I am trying my best to find the proper/best way to do this, but I need to attach two custom HTML5 data tags to an image once it is selected from the Assets manager. Like so:

    <img src="path/to/img" data-entity-type="file" data-entity-uuid="some-uuid" />

I was hoping to be able to attach it when adding assets.

    var newAssets = [];
    for (var id in data.files) {
      var a =  {
        category: data.files[id].category,
        src: data.files[id].src,
        type: 'image',
        
        // Trying these methods did not work
        dataEntityUuid: data.files[id].uuid,
    
        // Or
        'data-entity-uuid': data.files[id].uuid,
    
        // Or
        attributes: {
          dataEntityUuid: data.files[id].uuid,
        }
    
        // Or
        attributes: {
          'data-entity-uuid': data.files[id].uuid,
        }
      };
      newAssets[newAssets.length] = a;
    }
    am.add(newAssets);

Since I couldn't get that to work, I tried adding them on the component update event, but doubt that is returning a value to update them after being added.

    editor.on('component:update', (component) => {
      if (component.attributes.type == 'image' && typeof (assets[component.attributes.src]) != 'undefined') {
        var thisAsset = assets[component.attributes.src];
        component.attributes.attributes['data-uuid'] = thisAsset.dataEntityUuid;
      }
      return component; // Don't expect this to actually do anything but tried.
    });

So next I tried using the selector and jQuery to add the attributes on the component update event, but that did not work either.

    editor.on('component:update', (component) => {
      if (component.attributes.type == 'image' && typeof (assets[component.attributes.src]) != 'undefined') {
        var thisAsset = assets[component.attributes.src];
        $('.' + component.cid).attr('data-entity-uuid', thisAsset.dataEntityUuid);
      }
    });

I also tried extending the image component, and selecting that via the add assets code, but that did not seem to work, either.

    var newAssets = [];
    for (var id in data.files) {
      var a =  {
        category: data.files[id].category,
        src: data.files[id].src,
        type: 'new-image-component'
      };
      newAssets[newAssets.length] = a;
      assets[data.files[id].src] = a;
    }
    am.add(newAssets);

I am definitely doing something wrong. If anyone could point me in the right direction it would be a major help. Thanks.

Answers (3)

Coyote6March 16, 20180 reactions

Found a solution, but surely there is a better one than this:

    editor.on('component:update', (component) => {
      if (component.attributes.type == 'image' && typeof (assets[component.attributes.src]) != 'undefined') {
        var thisAsset = assets[component.attributes.src];
        var iframe = $('#gjs iframe');
        $('.' + component.cid,iframe.contents()).attr('data-entity-uuid', thisAsset.uuid);
      }
    });

Thanks.

artfMarch 17, 20180 reactions

Your solution only updates the element inside the canvas and not its model (so in your final code you'll not gonna see them). When you update the model its element in view is updated automatically, eg.

editor.on('component:update:src', component => {
	component.is('image') && component.addAttributes({'data-uuid': '...'});
});
Coyote6March 20, 20180 reactions

Thanks! Would there be a feature in the future to add attributes during asset import? Just curious.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.