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?

imso077 · Accepted Answer

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)

artf · Answer

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)

Picture element

Question

Answers (2)

Related Questions and Answers

How to add new HTML element with inline styles?

[QUESTION] Is it possible to add info modal on the editor

Question: How to add different aspect ratios to mobile devices in the device manager.

[Question] Having trouble dragging external html with draggable="true"

Paid Plugins That Match This Issue

Related tutorials

GrapesJS vs Webflow vs Tilda (2026): Honest Comparison, Pricing & Which to Pick

GrapesJS and AI: The Future of No-Code Web Design

GrapesJS vs Gutenberg: How to Build a Custom WordPress Page Builder

Browse Plugin Categories