cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Skilled Sharer
Skilled Sharer

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
Highlighted
Power Apps
Power Apps

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 🙂 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. 

View solution in original post

15 REPLIES 15
Highlighted
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!

Highlighted
Super User
Super User

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!

Highlighted
Skilled Sharer
Skilled Sharer

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 :).

image.png

Highlighted
Power Apps
Power Apps

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 🙂 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. 

View solution in original post

Highlighted
Super User
Super User

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!

Highlighted
Skilled Sharer
Skilled Sharer

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

Highlighted
Skilled Sharer
Skilled Sharer

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

Highlighted
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! 

Highlighted
Skilled Sharer
Skilled Sharer

Re: Gallery Challenge #2 - Random photos in gallery

Final result:

Now some sleep 🙂 

 imgGrid2.JPG

imgGrid3.JPG

Helpful resources

Announcements
secondImage

New Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

Experience what’s next for Power Apps

Join us for an in-depth look at the new Power Apps features and capabilities at the free Microsoft Business Applications Launch Event.

Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (10,531)