Could custom component in icon format than in text format

In Pinegrow, any component looks like a button with text inside it that you can drag. Is there any way we can change it to icon-like?

For example, instead of dragging a component named “images”, we could drag this:

Is this possible with custom codes/extensions?

Would that be for images in general or a specific image?

Having a visual representation of each type of component would put Pinegrow in line with other visual editors I have seen, don’t use them but I have seen em. I like the idea and would make PG look more polished.

@tim1234 Hi there, well, if its components you have defined yourself, you can click it on the PineGrow workspace, click the drop down on the right of its blue Pop up menu ,then, at the bottom, you can click Take Component Photo


You have a picture of the Component you have just created.
is this what you are after?

Does this work for any of the components or just the ones we create ourselves? I have not used this feature.

I’m not sure @terry44, I’ve only just learnt about it myself too and
that was from a request from Emmanual on the PG Beta testing Slack
channel to see if something was working correctly in that process. I had
not really even used components until then! :slight_smile:
You could experiment with it :slight_smile:

@schpengle @Terry44 Thank you guys for your input.

In Pinegrow, we could have a preview of any components. However, the name and preview of user-created components/lib may not be clear and enough. Therefore, I am looking for a kind of visual presentation. Instead of dragging “2-column-table”, we drag a component with a cartoon icon of a rectangle in half.

@schpengle I don’t have the Take Component Photo option in the Pop up but I have Take Preview Image which I guess is the same. The preview is great but a custom preview image will be better.

1 Like

Oh well. would you like any particular colour?

1 Like

What do you mean by colour? In fact, I am looking for a more general use. Let me clarify by this example:
I built my own component (just a simple table element) and named it DEMO. I can see in my drag-drop component tab, there is a component look like this box:
| DEMO |

It has preview and description. Yet, it is too dull and I want to drag a smile icon “:slight_smile:” instead. Is that possible?

Currently no.
but you could put a smiley pic or LARGE smile Icon in your component and take a component picture of it with PG. but this is not what you want. so, alas, no

Thank you for your answer. I hope I will have the solution as an update feature of future Pinegrow :slight_smile:.