Question - How can I create an existing image as link
Question
I have an existing template that is currently displaying the image in the middle of the page. Now, I want to make it link or clickable so that if the user clicks on the image it should open given href. How can do that? Currently, we have link block and inside of it, we can place an image. But, I'm asking for the reverse - Existing image to link.
Answers (3)
I've solved in this way:
on backend script:
var originalImage = editor.DomComponents.getType('image');
editor.DomComponents.addType('image', {
model: originalImage.model.extend({
defaults: Object.assign({},
originalImage.model.prototype.defaults, {
traits:[{
type: "text",
label: "ID",
name: "id"
},
{
type: "text",
label: "URL",
name: "data-img-url"
},
{
type: 'select',
label: 'Target',
name: 'data-img-target',
value: "_top",
options: [
{value: '_top', name: 'Same Page'},
{value: '_blank', name: 'New Page'},
]
}
]
}),
},
{
isComponent: function(el) {
if("IMG"==el.tagName) return {
type: "image"
}
},
}),
view: originalImage.view
});
When show page (I've stored on db)
if( $('[data-img-url]').length > 0 ){
$.each($('[data-img-url]'), function(i,e){
if( typeof $(e).data('img-url') != 'undefined' && $(e).data('img-url').length > 0){
var href = $(e).data('img-url'), target = $(e).data('img-target') || '_top';
var a = $('<a/>').attr('href', href).attr('target', target);
$(e).wrap(a);
$(e).removeAttr('data-img-url').removeAttr('data-img-target'); // KEEP CODE CLEAN
}
})
}SEO Friendly backend (added Alt attr)
var originalImage = editor.DomComponents.getType('image');
editor.DomComponents.addType('image', {
model: originalImage.model.extend({
defaults: Object.assign({},
originalImage.model.prototype.defaults, {
traits:[{
type: "text",
label: "ID",
name: "id"
},
{
type: "text",
label: "URL",
name: "data-img-url"
},
{
type: "text",
label: "Alternative Text",
name: "alt"
},
{
type: 'select',
label: 'Target',
name: 'data-img-target',
value: "_top",
options: [
{value: '_top', name: 'This window'},
{value: '_blank', name: 'New window'},
]
}
]
}),
},
{
isComponent: function(el) {
if("IMG"==el.tagName) return {
type: "image"
}
},
}),
view: originalImage.view
});@chauhankiran the correct step would be to create a custom component, kind of link-image which would replace the image one. The root of this component will be the <a> element and the inner one will be the image.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #935
[QUESTION] In creating a custom block how do you create it's corresponding settings?
I want to make a link that will let the user enter the url for it or to let him choose a link to another page which he already created.
Issue #482
Default asset manager in custom component
I am in process to create custom component for below template and we want to have user enter text,link,hover text and select image and want...
Issue #2537
[Question] How to make a block that could drop inline with a text block ?
I need to create an element, that probably is of span type, but the user need to drop it inline with a text. How can i achieve this functio...
Issue #3329
QUESTION: How should I receive custom trait modifications in the script?
Hi, @artf, this is a great framework, thank you very much. I am now using it to create components of the mobile BUI framework, and I ran in...
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.