How to conditionally remove/suppress lines from imaged source?

Wappler General How To
#1

NOTE: This thread was created because I had been in contact with Teodor about an issue with Lightbox. Links are not really valid anymore. This morphed to how to get an array of image paths into swiper/lightbox. I wouldn’t spend any time reading this thread.
I’ll repost a HowTo on that subject specifically.

Live link: http://137.184.106.209/vehicle_list3_dayofx
(note: this won’t work on a narrow mobile screen - media tag is set for tablet or higher)

If you click on the 3rd line, that vehicle record has 5 images.
5 physical image fields exist in that record (Image1, Image2, etc)
Click on the corvette under it and only 3 images. All fine so far.

BUT, I have a lightbox for the images.
So if you clicked on an image, they’ll nicely be displayed enlarged for browsing. Thank you Wappler!

Problem is the Corvette will show Image 4 & 5 from the Econoline Van. (assuming you clicked in this order. more specifically, when any vehicle doesn’t have 5 images, whichever ones are not supplied will show data from the most-recent viewed vehicle that had an image in that spot.)
Corvette doesn’t have Image4 & 5 data… its null.
So Lightbox, stored in the DOM or somesuch, has data from the prior record. And the null data isn’t overwriting that prior data, so it shows incorrectly.

What I think I need to do is Conditionally wrap each Image field to only exist in the source IF there was a Path in the data, and its not null. (Lines 162-166 in Source)

@Teodor said in a prior thread that Lightbox reads the data between the <a> </a> tags. I figure if for this given data-detail vehicle, if I show only the exact # of Images then I’ll be good.

What 'yall think?

PS _ this all worked fine before I integrated Lightbox. Having all 5 image fields displayed just fine.

#3

@Teodor

Live link: http://137.184.106.209/vehicle_list3_dayof
You can see the error in 30 seconds.
Click on the 3rd line, the Van
(wait for images)
Click on the 4th line - 1967 Corvette
After images appear on the data-detail, click on one of the 3 images to open Lightbox.
Scroll thru them and the 4th/5th images are from the Van.

ok, this isn’t an issue of restructuring my database.
let me pose this:
I have a Product record with a single photograph.
And there’s supposed to be (in every product) a 2nd image of the serial # plate.
But sometimes, the user didn’t upload the Serial# image - nothing I can do about that.

This scenario certainly doesn’t call for a restructure of the database.

But sometimes there will not be the 2nd image. Fact.
And using Lightbox, the 2nd image will show up incorrectly as the image from the prior Product.

Thats whats happening to me except I have 3-5 images. The null images will incorrectly show data from a prev. record.

… using the code I have below:

<a href="" dmx-bind:href="data_detail1.data.image1" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image1"> </a>
<a href="" dmx-bind:href="data_detail1.data.image2" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image2"> </a>
<a href="" dmx-bind:href="data_detail1.data.image3" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image3"> </a>
<a href="" dmx-bind:href="data_detail1.data.image4" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image4"> </a>
<a href="" dmx-bind:href="data_detail1.data.image5" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image5"> </a>

What I’d like is something like this:

IF (image1 is not null THEN)
<a href="" dmx-bind:href="data_detail1.data.image1" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image1"> </a>
ENDIF
IF (image2 is not null THEN)
<a href="" dmx-bind:href="data_detail1.data.image2" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image2"> </a>
ENDIF
<a href="" dmx-bind:href="data_detail1.data.image3" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image3"> </a>
<a href="" dmx-bind:href="data_detail1.data.image4" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image4"> </a>
<a href="" dmx-bind:href="data_detail1.data.image5" dmx-lightbox:images=""> <img alt="" width="300" class="img-fluid mb-2" dmx-bind:src="data_detail1.data.image5"> </a>

How can I get this done?

#4

I don’t really understand your idea here, and i don’t understand why are you trying to show these images like that, always rendering a fixed number of 5 images and not using a repeat that will just render the amount returned from your database query … BUT you have some bigger problems on this page.
You are loading some HUGE files on page load and your page is really slow and heavy:

Screenshot 2022-07-20 at 22.44.01
Screenshot 2022-07-20 at 22.44.012560×1268 879 KB

the images you show in this table are a few megabytes in size, some of them 10MB+ …
The total size of the page on load is 300MB+ which is beyond insane. You should really resizes these images, a page on load should not load more than a couple of MB!
Your page takes more than 1 minute to fully load on a Gbit connection.

#5

Yes.
I Will move to paging so all rows are not returned.
And/or there will be a tiny thumbnail to show in 1st column

Other than that,
All the fields are in one file.
The five pictures aren’t rendered until I click on a vehicle to show the data detail, correct?
In that case, I want to show whatever is in the main data record, which is no more than five.
They are not in a child table.
There is no repeat.
One fetch from the database gets me all the data that’s needed for 1 vehicle view.

so I can add paging, lazy loading, thumbnails, and if you filter with the pulldowns, that all results in a smaller data set, hence not the 300 MB. I could set a default when you initially go in to one of the smaller events and it will be a very small subset of vehicles.

but for now, just as I gave in the example above about a product and a second picture,
I need to solve the lightbox issue.

This isn’t even an OLTP system. It’s a read only catalog for all intents and purposes.
It’s one file.
I know there are large images, I know they’re not all the same size, but I’m not dealing with standardization of images right now. Images are coming from another source and at some point I may go grab those off the word press system and move them to another host and can generate thumbnails. But not now.

I could have the main image thumbnail path in one text field, and a JSON array for the 1 to 5 images. But I don’t really have lightbox documentation so I can’t tell if it can handle an array, or if I have the same issue with a varying number of images from record to record.

My issue is still the simple scenario in the previous post about a product record, with an optional second image.

After this lightbox issue, i’ll work on a thumbnail next so if you guys hit my live link in the future you won’t have so much bandwidth used up. :grinning:

EDIT: The gallery images in PukkaTravels come back as an array. I can modify the MSSQL data to return 1 string with the Image paths formatted as an array. This way, the string will omit the “unused” image fields and Wappler will be none the wiser.
Then, I can use a repeat instead of hard coding the 5 Images, and that solves the Lightbox issue.

#7

@teodor Is there no way to accomplish this?

#8

Your data is really wrongly stored.
You need to store the images in a separate table and connect them to the cars table using the car id. Patching and trying to “hack” what doesn’t properly work here because of wrongly structured data is not really a good solution.

To answer your question - you can use conditional regions for showing and hiding stuff based on a dynamic value, but this is not a real solution here.
Also - my browser wants to kill itself every time it loads your 350MB page containing 10MB+ images … that is a really really bad practice, you should not build such web pages, really.

#9

I already addressed your concerns about the large page (main thumbnail, paging, etc.)
All you have to do it select the 1st dropdown to “Rendezvous” and you’ll get a much smaller set.
350meg problem solved, until a thumb is made. I’m still playing with your product and haven’t decided on the UI so don’t know exactly what size to make my thumbnail[s]. That will come.

Thumbs: I might do a 100 for the non-mobile and let the smaller mobile scale to 90.
I might do a 300 for the data-detail AND let the main thumb scale from that, or not.
Don’t know yet.

On this post, you didn’t tell him he needed to adjust his data.
Sometimes he has 3 images. Sometimes 4 or 5 I bet.
I can just as easily (as I am testing now) have my varying Qty of images returned in an array instead of the 5 sep. fields, per that thread. So I’m trying to get a swiper to work with my new “array” column result, and then I’ll try to get Lightbox to work from the same field.

My Data Detail with a few pics is really no different from @TGD , except, quite honestly, I think y’all think I’m an inexperienced kid, because my tag says “educational license”. I’m on a non-profit license for a company that has an event with proceeds going to charity. That was allowed by your Pricing page, so thats what we did.

I hope to have a long relationship with Wappler, if I don’t get run out of town. And, If I have a “flattened” denormalized table that supplies data for these views, then thats what I have.

#10

That is a different use case. You always show a static number of images on the page, no matter if the actual images stored in the db are 2 or 5.
When you have the data stored properly and returned as an array, you can create a repeat region there and based on the exact number of images, the repeat will always dynamically determine how many images will be displayed on the page.

#11

why do you say this?
I only put 5 images on the page because I didn’t know any other way [yet]

Well, I just said I have this now.
Here is my new column in the db:

image
image1361×173 50.9 KB

So now its an array, forget that I have 5 sep fields and forget where the images are physically stored (thats backend that no front end API consumer should care about).

Now to move forward.

#12

link changed to http://137.184.106.209/test

#13

So now is this a different question? I see a dynamic swiper, where you have selected your database query as a slides source, and then you have:

<div is="dmx-swiper" id="swiper1" dmx-bind:slides="sc_query.data.query" centered-slides="true" auto-height="true">
    <div class="swiper-slide">
        <img dmx-bind:src="sc_query.data.query.veh_images.parseJSON()" width="200">
    </div>
</div>

The src is wrong, it should not include the whole path with the server connect name - just a field name.
Why using parsejson here?
Also why use the query as a source, when it returns many different things / different data and not just images?

Maybe try to keep different issues in different topics, jumping from topic to topic makes it quite hard for me to understand clearly what are you trying to achieve.

#14

because of this thread:

we are trying to decipher the mystery of the format of a “array” of filenames.
I’m just using the swiper as a test of something that will accept an array as input.
Patrick supplied the Parser in that thread.
I’m just trying to make headway, not changing the fundamental question.
(although the title of the thread is not quite right anymore)

#15

i’ve changed the ‘array’ now to valid JSON:

[{ “path”:“https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-Lakeland-2017-2.jpg”} , {“path”:“https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-Bloomin-Arts-2020.jpg”} , {“path”:“https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/Anglia-gators.jpg”}]

#16

I see something different there:

veh_images: "[{ \"path\":\"https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/07/IMG_99011.JPG\"} , {\"path\":\"https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/IMG_73501.JPG\"} , {\"path\":\"https://lakemirrorcarshow.com/wp-content/uploads/gravity_forms/3-d198eac43317e660b2461f1552f0307b/2022/06/IMG_58691.JPG\"}]"
#17

yes, so maybe now I don’t need to parse it.
that image you just referenced was from 10 hours ago.
things changing while you sleeping!

#18

The 10 hours old version is better. You either need an array like:

["image.jpg", "image2.jpg", "image3.jpg"]

or a comma separated list like:

image1.jpg, image2.jpg, image3.jpg

you can split the comma separated list to an array on the page as well.

Then you would use the db field holding your array/comma separated list as a source, not the query itself.

#19

k, done.

array

now thats basically back to the beginning of this post:

#20

So now you need to use your array source for the swiper or repeat region or whatever component you want to use the arrawy with:

<div is="dmx-swiper" id="swiper1" dmx-bind:slides="sc_query.data.query.veh_images.parseJSON()" centered-slides="true" auto-height="true">
    <div class="swiper-slide">
        <img dmx-bind:src="$value" width="200">
    </div>
</div>
#21

awesome, this is done. http://137.184.106.209/test
was dancing all around it - just took finding the correct syntax of the text and correct application of the parseJSON function.
Now to work on LightBox (using that array) after some sleep!
Happy Friday and Thanks Teodor

1 Like
#22

Usually such tasks are a lot easier and do not even require fiddling with code. It’s just “bad luck” for you using Wappler for the first time with your use case and the way data is presented.