cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
KickingApps
Level 8

Gallery Challenge #2 - Random photos in gallery

@h-nagao @wyotim

Another gallery challenge for you if you are interested.  I have photos in Azure blob storage.  They are named in this fomat:

2018_CoutryCode(US, JP, BC...)_City(Tokyo)_Location(Asakusa1, Asakusa 2, etc).  In my app, I would like to pull in random pics based on the location selected by the user.  So, if a user selects Japan, 2018, the pictures would be displayed, randomly sized, in a gallery (as seen in image below.)  Ideally, it would be nice if they could 'flip' through the gallery or refresh to see all photos for that time and location.  Possible?

image.pngimage.png

1 ACCEPTED SOLUTION

Accepted Solutions
PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

Re: Gallery Challenge #2 - Random photos in gallery

If you are wanting to achieve the collage in the first post, I am thinking of two ideas:

  • V1: use pre-defined layouts for images and make the images conform to the layouts even if each image has a different size ratio
  • Algorithm: to make this solution scale, what you're really looking for is a way to calculate the best positioning of the images when each image ratio changes. Some good examples of this are Google Images, Bing Images, and Pinterest.

This is a not a small challenge Smiley Happy There is a lot of math involved that I am not sure how to calculate but would love to see what others may come up with.

 

One small improvement you can make today, if you want existing galleries of images to look better, is to make the image box fill the template. Then change the Image Position from fit to fill. Images will be in a grid, but there will be less awkward white space. 

12 REPLIES 12
Super User
Super User

Re: Gallery Challenge #2 - Random photos in gallery

So I have started an idea on this but after @h-nagao's display of breaking the boundaries of gallery templates, I will need to digest the ramifications a bit. This is a really interesting challenge and I will try to get something together soon. Thanks for posting it and I look forward to seeing what others try as well!

seadude
Level 10

Re: Gallery Challenge #2 - Random photos in gallery

By no means a full solution, but might be of use...

 

Azure Blob Storage:

  • Setup containers for each "category".
  • Might be delgation issues if parsing Left(X) of each file name and there are >2000 pictures.

image.png
OnVisible Property of Screen:

ClearCollect(colFolders,
    AzureBlobStorage.ListRootFolderV2().value
)

OnChange Property of Dropdown:

  • This is where user would choose "category" (Japan, Canada, etc.)
ClearCollect(colBlobPhotos,
    AzureBlobStorage.ListFolderV2(Dropdown1.Selected.Id, {useFlatListing:true}).value
)

Gallery:

  • Items: colBlobPhotos
  • TemplateSize: 0

A Single Image Control in Gallery with Image Property set to:

AzureBlobStorage.GetFileContent(ThisItem.Id)

This allows user to select "canada" for example and have the images in the canada container appear (only a single one uploaded in this container):

image.png

Then choose "united states" and see them change (two images uploaded in this container):

image.png

There is a way to get these images to appear where you want them (thanks @mr-dang for the TemplateSize=0 trick). I think that may be applicable here, but I couldn't quite figure out how to apply it to Blob Storage nor how to structure the images rather than randomly place them.

Good luck!

KickingApps
Level 8

Re: Gallery Challenge #2 - Random photos in gallery

@seadude Thanks buddy; your contribution got me one step closer. I opted to stay with one container for now and filter based on selection.  Now, to randomly size.  I hope to have a solution soon.  @Mr-Dang-MSFT - if you have any thoughts on using random sizing to acheive the output form the original post -- I would love to hear your thoughts.  I've been reviewing the solution you and @seadude applied for the emoji app.  So many awesome contributions these past days....ahhhhhh.  Can't absorb it fast enough Smiley Happy.

image.png

PowerApps Staff Mr-Dang-MSFT
PowerApps Staff

Re: Gallery Challenge #2 - Random photos in gallery

If you are wanting to achieve the collage in the first post, I am thinking of two ideas:

  • V1: use pre-defined layouts for images and make the images conform to the layouts even if each image has a different size ratio
  • Algorithm: to make this solution scale, what you're really looking for is a way to calculate the best positioning of the images when each image ratio changes. Some good examples of this are Google Images, Bing Images, and Pinterest.

This is a not a small challenge Smiley Happy There is a lot of math involved that I am not sure how to calculate but would love to see what others may come up with.

 

One small improvement you can make today, if you want existing galleries of images to look better, is to make the image box fill the template. Then change the Image Position from fit to fill. Images will be in a grid, but there will be less awkward white space. 

seadude
Level 10

Re: Gallery Challenge #2 - Random photos in gallery

Idea Flash! @KickingApps, what if you had multiple, single column Galleries next to each other (hide scroll bar on each).

Gallery1 has TemplateSize set to 1/2 of Gallery2 TemplateSize. This would give the illusion of the "mosaic" effect. HAHAHA! Brains on the topic!

KickingApps
Level 8

Re: Gallery Challenge #2 - Random photos in gallery

Well, for now I opted for a gallery with same size photos.  I would love to pair up with a math wiz to learn how to create the grid using algorithm.

 image.png

KickingApps
Level 8

Re: Gallery Challenge #2 - Random photos in gallery

Update - first draft using a gallery.  A bit clunky and needs some work.  Once I have it refined, I'll post. the solution.

ImageGrid.jpg

Super User
Super User

Re: Gallery Challenge #2 - Random photos in gallery

That looks great! Unfortunately, I haven't been able to put any work into this challenge lately. I'll try to put some time into an algorithmic solution this weekend as this is a really interesting challenge and who doesn't love the opportunity to get into some math? Smiley Very Happy

 

Again, what you have looks awesome and I look forward to checking out your solution when you post it! 

KickingApps
Level 8

Re: Gallery Challenge #2 - Random photos in gallery

Final result:

Now some sleep Smiley Happy 

 imgGrid2.JPG

imgGrid3.JPG

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

SecondImage

PowerApps Monthly Community Call

Next Wednesday, August 21st at 8am PDT

Top Community Contributors for July 2019

Top Community Contributors for July 2019

Let's thank our top community contributors

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

FifthImage

Dynamics 365 and Power Platform April 2019 Release notes

Features releasing from April 2019 through September 2019!

SixthImage

Power Summit Australia 2019

August 20-23rd 2019

Users Online
Currently online: 101 members 4,885 guests
Please welcome our newest community members: