Set image from media manager for database field

Ask the community
,
1

I am looking to be able to display a row of 5 images from my wix media manager that the user can choose one and it will be added to a database field.

I am open to adding them to the database in a different way than from the media manager if it is easier, just looking to have pre-curated images that the user can choose from for submission.

Thank you!

1 Like
2

Hi Karson,

If you need to update these images regularly the best method is by adding them to a collection for easier management. Than, to pull the data either use wixData query or connect the collection using a dataset.

Otherwise, you can simply add them to your code as variables, (or ‘hard coding’ the url):

let img1 = 'image://v1/b167f8_1c2cb5c6eca6418eb51f9d16cdf3d4c4~mv2.jpeg';
let img2 = ///....

For both methods you will need to enter the image url.
To locate the image url see the following article.
Retrieving the URL of an Image on Your Wix Site

3

Thank you for the reply. It is possible I do not understand your response or my question was unclear. I will further clarify with my use case. Upon new user sign up, I want them to be able to select from a set of avatars and that avatar then be displayed throughout various areas of the site. Can I hard code the options and selecting an image inserts the URL into the database and will it then display it?

Thank you again.

4

Hello Karson,

Yes, you can achieve that with some coding.
The exact implementation depends on a number of factors however in general you should display the 5 avatars in your sign up page and create an onclick event that ‘selects’ an image.
for example:

let selectedImage;

export function avatar1_click(event, $w) {
    selectedImage = event.target.src;
}

export function avatar2_click(event, $w) {
    selectedImage = event.target.src;
}

Than write some code that runs once a user clicks the ‘submit’ to check if an image is selected, and if not, use the url/file given by the user, then submit the form by calling Dataset save()

5

Thank you very much!