Dynamic images?

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.

Hello Randy,
Your last video shows the right procedure of binding data. Either your images are not located in the folder you listed, or they are not uploaded there. Please check that, or provide a link to your page where we can check this.

I found the problem. Evidently queries do not like special characters included in their statement… I was using a prefix to catagorize and sort my images so they display in the proper table. I had been including the hyphen separating the prefix from the filename. When I removed it, all the images displayed. (The lumps from banging my dumb head against the wall are healing fine :grinning:).


On another issue… I have published my database and website to my host provider’s site and all work fine… EXCEPT I still cannot understand how to use Wappler to upload everything to the remote site. When I do, my pages that display the dynamic images break. When I use FileZilla to upload, the pages display the tables rows and cells, albeit not the images (except for the “Wild Lifes” tab on the ‘gallery.html’ page which does display the images). Please visit my test site and the screen caps above to review.

2 Likes

Good catch Randy, we have to do more database fields values escaping, @patrick will check it out .

As for the publishing just select the live site target and hit publish:

Do make sure your live database and local dev database have the same credentials so the database connection properties are the same

The images links are wrong in your galleries, the server seems to be case-sensitive. In the “Wild Lives” gallery you have images with lowercase, in the other galleries it is Images, that is why they don’t show.

I don’t think that the hyphen requires escaping in the LIKE statement, I will check it out. What is the database you use?

1 Like

Patrick

Holy S… you have a great eye. My host’s linux server must be case sensitive with its pathing. Since I changed the uppercase ‘I’ to lowercase ‘i’ the images all display.

Can’t thank you enough - I never would have noticed this!

BTW, I use MySQL.

1 Like

8 posts were split to a new topic: Dynamic images and dynamic attributes

@psweb maybe a candidate for your tips. "Most Linux servers are case sensitive. always check the case of paths and files match "

1 Like