Dynamic images?

I am having a lack of coffee moment or something. I can’t for the life of me remember how to add images from a database to a page?

I know it’s so simple. But I can’t seem to find it. What am I overlooking?

Just pick any image you want - and then choose add Dynamic Attributes / Image / src

Hmmm, can’t pick any image. They are on remote server uploaded from a form. I am way over thinking this I think. lol :wink:

I meant any image tag on your page :slight_smile:

Yeah yeah … I figured it out. It was too simple. I was expecting it to be harder than it was. Must be time for a beer. :wink:

1 Like

Yes make them two - large ones :slight_smile:

Stupid question #2: I can’t seem to figure out how to make them clickable to open the larger view in a lightbox? Another thing that I am sure is so dang simple. Maybe I need a holiday …

Use App Connect Lightbox - not sure if we have the docs for Wappler already but it works the same as the DMXzone extension:

I tried that. But adding a Link as a dynamic attribute isn’t available - neither is lightbox.

I was able to access them and get it working from the DOM Panel. The options weren’t available in the App Panel. Not sure if that is by design or not. But I got it working. Thanks.

Hello Brad,
In v 1.0.5 we introduced “Anchor Image” component in App Structure. This is an image wrapped with a link, so you can use it directly to trigger the lightbox from within the App Connect panel.

Yeah I tried it out already. Didn’t work too well. Worked fine in Wappler design view but not in live browser. I have more spots I want to use it so I will try again today.

But it seemed like it was adding the dynamic link in the wrong spot.

Turns out it was most likely user error (as usual). Anchor Images work just fine :wink:

2 Likes

That’s great to hear. :slight_smile:

Sounds simple and I’m sure it is… but I cannot get this to work. Is there something I’ve incorrectly set (see screen cap):

Hello Randy,
When binding data inside a repeat region (or repeat children region - it is the same) you must bind expressions (bindings) located in the repeat region, not the query itself …
You already bound the query as an expression for the repeat - inside the repeat use the bindings listed under the repeat in the app structure.

Thanks for your response. However, I do not follow HOW to do what you’re suggesting. Could you expand or even demo the needed steps?

Have a look at the following

img-source.mp4 (2.0 MB)

Wow… Thanks for the capture vid. I followed it step-by-step but my images do not display. Your vid shows you setup your page to display thumbs… I didn’t do that. Is that necessary to make this work? If so, can you direct me to the docs showing how this is done.

BTW, I can’t thank you enough for all the time and help you’ve given me. I’d still be struggling with just opening up the app if it weren’t for all your help!
Here is my vid of how I’m trying to follow your demo - note the contents of my TBODY Repeat is different than yours… but that shouldn’t make a difference should it?Dynamic Images.mp4 (8.5 MB)

1 Like

With the limited amount of information that you have provided, it is hard to know what has gone wrong. The video shows that you the correct procedure.

The only thing that I can think of is that the image path is not correct. Open the page in Firefox, right-click on the page and choose ‘Select All’. Then with all selected right-click again and click on ‘View Selection Source’.

image

This will show the source code after the page has been rendered. In the page that has opened (showing code view) scroll to the area where the images reside and make a not of the ‘img scr=""’. It should look like

<img class="card-img-top img-thumbnail" alt="Hats" src="img/products/lines/Hats.png">

If the ‘img scr=""’ is missing, then there is something wrong with the data source, in which case please come back here. If the source has been populated it may be that you do not have the correct path.