cancel
Showing results for
Did you mean:
Level 8

## Gallery Challenge #2 - Random photos in gallery

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?

1 ACCEPTED SOLUTION

Accepted Solutions
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 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

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

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.

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

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

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!

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 .

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

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!

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.

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.

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?

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

Highlighted
Level 8

## Re: Gallery Challenge #2 - Random photos in gallery

Final result:

Now some sleep

Announcements

#### Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

#### Watch Sessions On Demand!

Continue your learning in our online communities.

#### Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

#### Power Platform World Tour

Coming to a city near you

#### PowerApps Community User Group Member Badge

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

#### Join PowerApps User Group!!

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

Top Kudoed Authors
Users Online
Currently online: 71 members 3,481 guests
Recent signins: