How to display images stored in a collection?

Ask the community
, ,
1

I can see the images in a column, but I would like to show it in greater size when the user select the cell.

The Image ID in the collection is “image1”. I retrieved in a user form the collection data into a table. On CellSelect I got the below cellData and tried to use it for setting the “src”. it will help me if could provide me the full syntax how to set the “src” and then the syntax for displaying the image.

uri: “c7cf03_63559eaf81f644ea9da9d44d74d207f0~mv2.png”
width: 640
height: 1136
title: “IMG_1455.PNG”

2

Hi!

In this forum we provide support by sharing examples, articles and guides rather providing coding solutions and snippets.

I’m not sure about your use-case (and would love to hear more about what you’re trying to achieve) but it sounds like a classic case for datasets.
Here’s an article about displaying content from a collection using datasets.

In case changing the src is essential for your work and it can’t be done by dataset - here’s an example for altering the src.

Doron.

3

Thank you for your reply. I have read all these articles before, but I still was not able to display the image. I could see it in the column.
I just found a solution, without coding. I just added an image in the same page where the query table is. I then connected the image to the dataset an image field and it works perfectly. When I select a row in the table, the corresponding image overhide the initial image.
Now I’m trying to do the same for a video, but it looks, WIX doesn’t support connecting video fields in table. It also doesn’t support connecting video placed in a page to a dataset filed video type.
Thank’s anyway!

4

@shimonsuissa1954 Sorry for the late response on this thread as I just code with Velo these days. I’m not sure if my approach can help you.
After investigating the document and try some code I figure out that the URL that is stored in the Velo Collection doesn’t follow the right format at all. So I come up with a Regex:

/v1\/(.*?)\/(\d+)_(\d+)/

The above regex will return an array with imageID, width, height at index 1,2,3 respectively.
You can checkout my code:

const [, imageId, width, height] = contact.image.match(/v1\/(.*?)\/(\d+)_(\d+)/);
const imageUrl = `wix:image://v1/${imageId}/${imageId}#originWidth=${width}&originHeight=${height}`;
    
$w('#avatarImg').src = imageUrl;

Hope this can help you.

5

Thank you! This did help. I need to learn more about regex. In the meantime, I just concatenated the same as you have laid out.

//lightbox code:

let item = wixWindow . lightbox . getContext ();
const imageId = item . displayImage . uri ;
const width = item . displayImage . width ;
const height = item . displayImage . height ;
let image = ‘wix:image://v1/’ + imageId + ‘/’ + imageId + ‘#originWidth=’ + width + ‘&originHeight=’ + height ;
$w ( ‘#image25’ ). src = image ;

not sure why this is made to be so hard. Why not just save the wix url in another field so we can access it directly?

6

@mike91901
You wanna know more about Reg-Ex?

This could be useful for you!