Picture element
Question
Hi, I would like to add a "picture" block to the editor, where we could define differnt image for different device, the base html for that would look like so:
<picture>
<source data-gjs-type="source" media="(min-width: 650px)" srcset="">
<source data-gjs-type="source" media="(min-width: 465px)" srcset="">
<img src="">
</picture>
My problem is, wen it is inserted to the editor, the img component, is viisble, and moveable, even from the picture element. With that it could be cause unintended layout problems, and the images could end up in different place. Another issue with this, that the amount of sources could be changing by usage, sometimes, it is only 1 source (device support) reuired sometimes, 3...
What would be the best way to overcome these problem?
Answers (2)
Hi, hi you all solve the problem of responsive images ? (We have to change images, because of the content of the image should change on smaller devices, so the focus is smaller)
Learn how to create custom Components and then take a look at all the available properties on the Component (so you can tell, for example, the image not being draggable)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2381
[QUESTION] Is it possible to add info modal on the editor
Hi, I would like to add on the grapejs editor a clickable questionmark we can click so we could give information on what does this specific...
Issue #3218
How to add new HTML element with inline styles?
I would like to add a new HTML element, with inline styles, around the rte.selection(). With the following example, the HTML is OK, but pro...
Issue #2595
[Question] Having trouble dragging external html with draggable="true"
I want to make an external html element able to be dragged into GrapesJS, like how you can drag in a block and it will add something. I hav...
Issue #3339
Question: How to add different aspect ratios to mobile devices in the device manager.
We are working on a cms system that uses grapes js. We came up with a condition where we couldn't add aspect ratio in the "mediaCondition"...
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.