Enhancing the Image Tool Behavior

Hello, I would like to suggest an improvement for this tool.

Instead of: clicking and searching for an image
it could be: a bounding box where I can shape and resize it, and then, upon clicking, I can place an image or drag and drop it into that previously drawn box, rectangle, or circle.

Another function that I would like to see or haven’t been able to find: creating a repeating grid as the now-defunct Adobe xD does (I still use it), for example: I create a box and I can turn it into a 3x3 repeating grid for a gallery, for instance. Then, I select 6 images, drag them, drop them onto the grid, and magically Adobe xD arranges them in any order.

I’m aware of the CSS Grid Layout update, but I’m specifically referring to the image tool.

Perhaps implementing this could entail a lot of programming, I apologize for that, but it would save a lot of time when creating wireframes.

Note: I’m transitioning from years of using Adobe xD to Penpot, I never used Figma, nor do I wish to use it. I prefer investing time in learning Penpot.

I hope you consider my proposal, thank you for reading and many thanks for developing this great tool.

Regards,
Adolfo H.
Web Designer.

1 Like

Hi there @Adolfo_Hernandez

I think your suggestion kinda aligns with this idea I had a while ago: Image Frames - An idea to replace the image tool - #3 by RenanMayrinckDesign

1 Like

Hi,

Yes, it certainly looks similar. I haven’t used Figma, I have a very square mind, maybe in that regard, I have the Adobe suite and for now I use Adobe Xd, I saw a video about Penpot 3 months ago and here I am.

In your case, I saw an answer that is not what is being tried to explain in both posts, the mentioned Taiga talks about “Images as fill style” and it is already solved.

What is being looked for is for the image tool to be more advanced.

In my case, we are 3 people, where 1 is a copywriter, sometimes for her and for the client we need to show an initial wireframe, where simply the space where a video or an image will possibly go is shown.

In Adobe Xd we solve this with a square and in the case of being a gallery, we convert that same square into a repeating grid, then select the number of images and drop them on that square or grid.

I am very new, but I see that this can be solved with the new CSS GRID, but what happens if it is a single image in a section? I have only managed to achieve it by placing a mask, it made me feel like I was using Adobe Illustrator.

I just hope that the Pepont team can read us and take our suggestions.

I’m excited to be moving to a program that is superior and more advanced than Adobe xD.

Thanks for answering, I send you a virtual hug.

1 Like

Hey,

in Penpot 2.0 you can use a image as Fill for any object. Just change the Color-Fill to Image or add an extra Fill via the ±Icon. Sadly no Drag & Drop for the Image, you still have to Click & Search the Image.

(I hope Drag & Drop will be possible in later versions, plus further options to select how the image is aligned / placed inside the shape / container - Like in Figma)

1 Like

This is possible if you add the image as an independent object inside a board that has clip content. Not the best solution, but allows to do the same thing.

1 Like