I have a query which returns a list of products, each of which might have zero or more images. When displaying the records, I need to determine if there is at least one related image - if there is, the first image is shown; if there is no image, I want to display an empty div - so the layout remains consistent (same number of columns) and no broken/missing icon is displayed. The image displayed is using the dynamic srcset feature.
In the past I would usually use PHP to check the file system for the existence of a related image and conditionally display the relevant div. (The filenames are always record_id.jpg for the first image.) Sometimes I would use javascript (onerror) to hide the broken image.
Srcset doens’t seem to return an error if the image is missing, so I don’t think I can use that option. (It’s not a very satisfactory solution anyway.)
If the filenames are stored in an image table, I could use a left join to determine if related records exist. I could use Group By to prevent products appearing multiple times if there are multiple images for a product, but Server Connect doesn’t support this (AFAIK), so I would have to create a view (using MySQL). This might be the best solution, but there are some disadvantages in using views.
Currently, I’m using a repeat in Server Connect, using If File Exists:
With this method, I can show the relevant div (with or without the image), using:
dmx-hide="!sc_search.data.checkImg[$index].fileExists"
This seems a ‘Wappler’ way to do it, except the Then, Else parts of the repeat are not actually needed - so these lines are doing nothing useful - and the path used in dmx-hide condition is not available from the repeat used to display the records.
Anyway, I have a solution which seems to be working fine. However, this is probably quite a simple problem and I suspect there is a simpler solution than those I’ve tried. I’m curious about what best practises for this might be - from the point of view of simplicity and performance. I imagine it’s quite a common situation.
Last updated: