Link a photo to Strip from database

Ask the community
,
1

1920×775 182 KB

Hey,

Can someone tell me how i can link an uploaded photo field to dynamic page, Strip?

Thanks

2

Hi Robert,

At the moment we do not have this capability as part of the no-coding product. However, with a little coding it can be done.

To do so, register an onReady event for the dataset. In the event, read the currentItem, get the image url from it and set it to the strip background. It should look something like

export function dynamicDataset_onReady() {
  let currentItem = $w('#dynamicDataset').getCurrentItem();
  if (currentItem) {
    let imageUrl = currentItem.myPictureFieldKey;
    $w('#column1').background.src = imageUrl; 
  }
}
3

I’m confused at how i achieve this? Can you help step by step at all Yoav? Im sure it’s easy but i’m getting 1 error saying "dynamicDataset undefined

4

Hay Robert,

Sorry for that. My mistake.

See the fix above in the first line. Remember you will need to replace the dynamicDataset id with the actual id of your dataset.

5

Hey - i am getting this issue?..

1363×601 217 KB

6

Am i doing something wrong? Confused so much! haha

7

Robert,
What if for the strip you made a image on the background and put it 80% (or so) transparent box on top. Then you could link your image to a read-only dataset and it would appear as a strip but really isn’t?

8

No Jason, it wouldn’t be responsive doing it that way.

9

True true, I forgot about that.

10

Hi Yoav, any update on this?

11

Basically what im wondering is - with the code you provided me, what have i to replace inside that code and where do i find the info to replace?

12

Hi Robert,

The part in the code that is marked with a red underline is called the element id. It is how we find elements on the page. Select the strip, you will see that in the property manager you have a name at the top - the id. This is the value you want to write there instead of the red marked value.

Having said that, I realize there is an issue if you have a strip with only one column. In this case, you cannot really select the column in the editor, so you cannot set it’s id. Basically, it is a bug.

The workaround is to add another column, set the id of the first column, and then delete the second column. The first column id is what you wanna use for setting the background image.