How to choose from images list for <img> edition?

[GalinhaLX]

Hi

Is there a way that <img> edition links to a list of url/images (instead of Mavo popup)?

I would like to be able to choose from a list of a preloaded images (referenced inside a json file for example), and allow user to choose from them, instead of providing a url or uploading it each time

As described on documentation here,
I tried to apply it to <img> element: see my [codepen](https://codepen.io/galinhalx/pen/KKoxWeX)

but editor always popup mavo's window to uplad from file

Does someone experienced that, or find out a solution to this usecase?

[DmitrySharabin]

Hey there, @GalinhaLX! 👋🏻

Do you mean something like that:

<img property="myImage" mv-editor="#imageList" mv-default="https://mavo.io/img/logo-mit.svg" />

<select id="imageList" hidden>
	<option>https://i.imgur.com/LPeWcag.png</option>
	<option>https://mavo.io/logo.svg</option>
	<option>https://mavo.io/img/logo-mit.svg</option>
</select>

Please note that to replace the default editor, we should use the mv-editor attribute. And the value of this attribute is a valid selector (like in CSS) that allows Mavo to find the corresponding element on the page. That's why we use #imageList in the code above (since we ask Mavo to find the <select> element by its id attribute).

Hope it helps!

[GalinhaLX]

Thanks @DmitrySharabin

Seems I missunderstood mv-editor-* (still not sure to understand that one by the way)

[DmitrySharabin]

Consider the following code: <span property="email">[email protected]</span>. By default, Mavo will use <input type="text"> to edit this property. But what we relly need is to use <input type="email"> as the editor (for built-in email validation and better UX).

But how can we change the value of the type attribute of the property editor? The mv-editor-* family of attributes allow us to pass attributes and/or their values to the property editor. All we need to do is just replace * with the name of the needed attribute. And give this attribute the needed value. So, in our case, we would have: mv-editor-type="email". The full code snippet would look like that: <span property="email" mv-editor-type="email">[email protected]</span>.

We can customize the property editor even further. Suppose we want to limit allowed emails to the globex.com domain. The pattern attribute is for the resque. And once again, we can pass this attribute and its value to the property editor with the mv-editor-* attribute: <span property="email" mv-editor-type="email" mv-editor-pattern=".+@globex\.com">[email protected]</span>.

[karger]

While I may not be interpreting your question correctly, the following two things should work: 1) define a chosenImage property, place <img src="chosenImage"> in your app, and use a select menu to let the user select a value for chosenImage 2) if you want them to select an image by clicking on a thumbnail, you can put an mv-action on each thumbnail that uses set() to change the value of chosenImage based on which thumbnail they click.

…

On 8/11/2022 12:54 PM, GalinhaLX wrote: Hi Is there a way that |<img>| edition links to a list of url/images (instead of Mavo popup)? I would like to be able to choose from a list of a preloaded images (referenced inside a json file for example), and allow user to choose from them, instead of providing a url or uploading it each time As described on documentation here <https://mavo.io/docs/properties#mv-editor>, I tried to apply it to |<img>| element: see my |[codepen](https://codepen.io/galinhalx/pen/KKoxWeX)| but editor always popup mavo's window to uplad from file Does someone experienced that, or find out a solution to this usecase? — Reply to this email directly, view it on GitHub <#902>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAIWSXUXAIFAHF3PTTROFV3VYUV4NANCNFSM56I33N5A>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[GalinhaLX]

Hi @karger

Thanks for both anwers. I finally used 2nd option