Why can we not use a secondary image source when one fails?

I feel like ive either gone beyond reasonable thinking but i cannot for the life of me get retool to select a 2nd image if the first one returns a null value. I have tried the following

and also the standard

{{item.images.png.xyz.url}} || {{item.images.jpg.xyz.url}}

Any help would be great but i think its just retools way of doing things.

To add whilst building a mobile app has anyone maged to work out a waywhen you make a list/gallery to make the image clickable to go full screen?

I think you may need to put the logic inside the curly brackets, ie:
{{item.images.png.xyz.url || item.images.jpg.xyz.url}}

this doesnt work unfortunately :frowning:

May need to see your app then, looks ok to me:
url1 is null url2 is the kitten. image source is url1 or url2:

if i set jpg as the first option it works, but then the png ones dont load and vice versa

Ah ok, and what are the values of the items.images objects?

If the first path (item.images.png.md_2x1_3.url) has any value at all then the javascript will try to use that as the image source and then won't fallback to the second one.

The || logic will only work if the first part is nullish - you may need to change your query or data or logic here to make it understand that.

response is null and second response has the data

{{ item.images.png.md_2x1_3.url !== null ? item.images.png.md_2x1_3.url : item.images.jpg.md_2x1_3.url }}

how about that..?

no sorry i just dont think retool have the full command list setup but makes perfect sense to have one, we use it in html code.

Strange, this works for me in a test application using that null || not null approach. Confusing. Might be something the support team can look into a bit more closely for you.

I will send them a message, i cant currently get on the mobile app builder it will not load. I will let you know unless anyone else knows what the outcome is.

Hey @danny! Can you try using optional chaining? e.g. {{item.images.png?.xyz.url || item.images.jpg?.xyz.url}}

If the item you're accessing does not have a png or jpg property the transformer will error when trying to access the xyz property on it causing the whole thing to return null.

This is it fantastic for future reference can i add a 3rd option to this? for example

{{item.images.png?.xyz.url || item.images.jpg?.xyz.url || item.images.svg?.xyz.url}}

Yep! :grin:

1 Like

whilst your here do you know how we can make the images clickable? i did try html code but that didnt work. ideally to make them full screen but even a link to a website would be good.

Have you already experimented with adding a Press handler to the collection view itself? You can use this to open a separate screen in your app that contains a larger version of the image, or otherwise open a URL of the full image.

What do you think?

thats ok but for image really like many other mobile apps pressing a image just enlarges it as a overlay. The tables on a app on a computer does this great. Due to my app been all data pulled from a api (I am new to this mobile side of retool and its differences i will confess now) i will play with creating a new page based on the users clicking it is not ideal but maybe retool can look at images been more like how were used to with other mobile apps. Thanks for your response though. Also can retool look at making apps public without the need for people needing to sign into an account.

Got it, thanks for that feedback! I'll surface it with the dev team :slightly_smiling_face: