Best practice when using Galleries with Photos

[Dudditz]

Hello,

I am putting together a Image Contest type Power App that uses a SharePoint document library to store images.  These images are displayed in a gallery and when you click the image it opens them up in a form where you can rate them.  The image in the form is much larger than the thumbnail displayed in the Gallery.  I am curious if I should avoid using collections in this scenario?  For example if the SharePoint library had 500 images and they were on average 1-5 megs does the collection pull try to download these upon creation?  I typically use collections when building PowerApps however I have never really built a PowerApp that is mostly built around a library with many photos.  I am concerned if this is not done correctly performance will fall apart once we get many photos in the library.  Any guidance around best practices would be appreciated.

[WarrenBelz · Accepted solution]

Hi @Dudditz ,

A collection from a Library does not bring in the picture, only the URL, which can be referred to a 'Link to item' if the picture needs to be opened. This works on PCs (browser) but not on mobile devices (app). There is however another property that is available in a collection with is '{ThumbNail}.Size where Size is Large, Medium or Small.

I have written a blog on SharePoint photo viewing and storing - the viewing is towards the end. Please have a read and I am happy to elaborate further.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

[Dudditz]

Hi Warren,

I guess this makes sense that it would not bring over the picture into the collection.  So basically the image being a link is simply loading at the time of retrieval.

I will check out your blog later today and come back if I have any more questions or mark yours as the Answer.  Thanks for your help!

[Dudditz]

Great blog post there, very informational.  Do you know if it's possible to display anything higher quality than the large image?  I am looking for some details as to what each of these sizes are.  For example, if I display the large in a full screen image control it looks decent however seems like it's defiantly reduced resolution, etc.  I am not looking to display the native resolutions however something higher than large would be nice.

Thanks for all your feedback.

[WarrenBelz]

Thanks @Dudditz ,

I can relate to our user experience in that the Large item is adequate for full screen on an iPad for the purposes of what we use them for (repairs on Power Poles), but any zooming in goes a bit pixelated.

You can still use Launch('Link to item') to open them in a browser if the quality is not good enough.

[Dudditz]

I do think the large image will be just fine for this application however as a secondary option I think what you proposed would be great to have it as an optional button to view in full screen.

Thanks for all your feedback on this.

[Dudditz]

Been doing some testing this morning on native 1080p laptops, quad displays, 4k displays, and a variety of Ipads.

While I will say the large will work the quality of the photos clearly suffers after displaying anything greater than 720p.  Even on a 1080p monitor you can already see marginal pixelization, reduction in quality, etc. and this just increases as you step up the resolution.  My thoughts are we really could use a higher quality option for those that have these requirements.  Large works great for most day to day applications especially around mobile however we are now building responsive PowerApps that can be used across mobile, 1080p laptops or even 4k screens.  Where I work we have a mixed bag of resolutions depending of the employee's job function and device.  Unless we discover another way the launch in another tab will work however that does create a bit of fragmentation as they are now outside the app.  Warren or anyone else, are we aware of any other options besides using the Launch('Link to item')  to view a higher resolution or native resolution of image files?  Currently we are using the ThisItem.'{Thumbnail}'.Large in a image control.  Would be nice if there was one stop above .Large

Thanks!

[WarrenBelz]

Hi @Dudditz ,

Unfortunately for mobile devices, they will not resolve the anonymous SharePoint link within the app, so Thumbnail is all that is available for viewing inside. 

Our work is mainly field-based and we take tens of thousands of field pictures. You are correct that 720p is about all you will get as a "preview", but the crews are happy to launch it in SharePoint if they need to check they have the required detail. I have not really thought it through for these reasons, but you may be able to get a picture back with a Flow into an image control.

[Dudditz]

After some additional testing this seems to be working for achieving the higher resolution on desktop and thumbnail for mobile.  Using this work around to determine if the device is mobile or desktop. 

https://powerusers.microsoft.com/t5/Building-Power-Apps/Detect-web-browser-users/m-p/76971#M30518

Set(
varMobileOrDesktop,
If(
Location.Altitude > 0 Or Acceleration.X > 0,
"Mobile",
"Desktop"
)
);

 And on the pop out image the following forumula.

If(varMobileOrDesktop = "Mobile", ImageGallery.Selected.'{Thumbnail}'.Large, ImageGallery.Selected.'{Link}')

I am sure this can be done a bit more elegantly as this is the first draft in testing.  I have verified this works as expected on smartphones and desktops meaning smartphones are opening the thumbnail and desktop get the higher resolution link.  I am not thrilled now mobile devices get a message on first load asking for permissions to use location settings.  Also, I have not tested on Ipads and other higher resolution tablets however I would speculate they will still be using the lower resolution thumbnail which is unfortunate.  Getting closer.

[WarrenBelz]

Hi @Dudditz,

I use that test (to see if it a mobile) for other reasons (different syntax for deep-link launching), so that is a good solution.