[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)
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.
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': '...'});
});
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.
Issue #1702
[Question]How to get rte selection inside the result function
I'm basically trying to put an input fieldinside the RTE so that users can make link more easily. console.log(<a href="#">${rte.selection()...
Issue #1578
[Question] Custom request on "src" attributes
I implemented a small GrapesJS editor that allows to edit Django/Jinja2 templates. GrapesJS by default is trying to GET the image preview o...
Issue #372
Asset Manager not automatically add images to assets after uploading
The JSON response of an upload is like this {"data":["http://url.com/flower.jpg"]} The response event is working.In the response event resp...
Issue #930
[Question] Update resizer after asset changed
Hi! I trying to change default assets manager with ours custom manager. On double click the selected image is replaced with a new one with...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.