[Silk UI Mobile] How to show full size image on LightboxImage updated widget?

[Silk UI Mobile] How to show full size image on LightboxImage updated widget?

  
Forge Component
(27)
Published on 14 Jun by Labs
27 votes
Published on 14 Jun by Labs

Hi,

There was an update to LightboxImage widget and now it only has a thumbnail placeholder and zoom settings. We have a list with avatars (small size images for fast load) and we need to show big picture on avatar click. How should I specify the full size image src?

There is a parameter to set a URL but not binary data.

Or should I have an REST API service exposed to get binary data for image?

Thank you.

Hello!

In order to only load the full image after a user tap and prevent the app from loading all assets at once, the image is now specified in the ImageURL input parameter of the LightboxImage. If you do not have a direct URL but have the binary file, you can use the BinaryToBase64 action to get the URL.

We will update the Lightbox documentation with this use case, hope this helps!

Hi Dinis,

Thanks for the reply. however I've tried it and can't get it work.  

BinaryToBase64 doesn't have client side action it can't be used in the expression for this widget.

I've tried create client side action with JS node and it converts binary data to base64 but the image is not loaded in the Lightbox as it threaten returned base64 as a part of URL (see attached image).


I've tried to create a separate screen with only image but it didn't work either.

What am I missing?

Thank you.

Hi,

I'm attaching an example on how to get the Base64 working on the URL, your probably only missing the definition of the image before the Base64 data iself: 

On the URL parameter I have:

"data:image/gif;base64," + GetImages.Images.Current.URL

We know it's not as easy as just having a placeholder for the image, but the performance gains and huge for these situations where you have a small thumbnail that loads larger images later on.

Hi, 

Thank you for example. 

However in this example we have a request that loads all the data but for example in our use case "list of users with avatars" it is not practical to have a request with list of ~50 full size avatars. I've added a RET API to get a full size image by id and convert it to base64 but it doesn't work for URL value (see attached oml).

How should I correctly provide URL value?


Thank  you.

My suggestion would be to have a URL attribute on the Images entity so you can store it and have it available when loading the thumbnails, for performance reasons. You can also create an action to bootstrap all URL's for existing pictures.

In your example, the problem is that the URL sent to the Lightbox is not the result of the REST call, but the URL of that request e.g. /dcaMobile/rest/GetImages/GetFullSizeImage?PictureId=1

What you need is to call that endpoint in a server action and then add the result on the ImageURL parameter, using the "data:image/gif;base64," string before the Base64 value.

Updated the example :)

Since we're doing the test on a single OML, we need to consume the REST in order to use it on the data action.

Thank for update. But in this case all the data is actually loaded all together (small and big images), isn't it?

The idea was to have big image only be requested when thumbnail is clicked otherwise it is not different from previous version. On chrome dev tools it is shown that big image is loaded from memory cache instead of doing a request to server to get big image.

I think it should accept api urls like ""https://****.outsystemscloud.com/dcaMobile/rest/GetImages/GetFullSizeImage?PictureId="+GetImagesIds.List.Current.Id" that returns a base64 string .  Otherwise it is only usable for static images or have same performance as previous version.

You're right, if you need to get the URL dynamically, you'll need to load all data beforehand.

The best performance possible requires you to have the URL already stored, if you can achieve that, the big image will be loaded by the browser only after click.

In the previous version the big image is loaded into the DOM, so the performance is not the best.

You could have an action to generate the URL's and store them in the database, this way you'll have what you need to use on the Lightbox, is that doable? 

That would be great. But how do I generate the URLs for database images? Is there any built-in function or technique?


Solution

Sorry, I've made a bit of a mess on the previous example, i think that this version is already doing what you need, please let me know if it solves the problem :)

Solution

Thank you very much - it works as expected :)