cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
KickingApps
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

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
wyotim
Resident Rockstar
Resident Rockstar

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
Memorable Member
Memorable Member

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!

@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

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

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!

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

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

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! 

Final result:

Now some sleep 🙂 

 imgGrid2.JPG

imgGrid3.JPG

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (2,365)