cancel
Showing results for 
Search instead for 
Did you mean: 

Photo Image Grid

With an HTML Text Control, tables, photos and a few collections, you can create a somewhat responsive image grid. 

Typical image grids require CSS. While that is not an option in PowerApps (HTML Text Control), you can achieve  similar results using the HTML Text control and a table.  Spice it up with a dropdown filter and allow your users the option to filter a photo library and display the photos.  

For this example, a SharePoint document library was used as the datasource. (Azure blob storage is yet to be tested). For my purposes, photos naming convention is as follows:  
2018_US1-Oregon_Bend1.jpg

In the first collection, I add a column where I split the name of the photo to only include the text up to the

'-'.  I use this to populate the dropdown (for filtering).

Let's take a look at the formulas. 

/*===============================================================
Collect all photos
================================================================*/
ClearCollect(
    colPhotos2,
    AddColumns(
        Photos2, "ddName", First(Split(Name, "-").Result
)));

/*===============================================================
Filter based on selection of dropdown
================================================================*/
ClearCollect(colFiltered,
Filter(
    colPhotos2, ddName.Result = Dropdown2.Selected.Value));

/*===============================================================
Determine number of photos for each column
================================================================*/
UpdateContext(
    {
        varFirstHalfFiltered: Value(Round(CountRows(colFiltered)/2, 0))
    }
    );
UpdateContext(
    {
        varSecondHalfFiltered: Value(CountRows(colFiltered) - varFirstHalfFiltered) 
    }
);

/*===============================================================
Create two collections; one for each div in the table
================================================================*/
ClearCollect(
    colPhotoCol1Filtered,
    FirstN(
        colFiltered,
        varFirstHalfFiltered
    )
);
ClearCollect(
    colPhotoCol2Filtered,
    
    LastN(
        colFiltered,
        varSecondHalfFiltered
    )
);
/*===============================================================
If columns are significantly lopsided  due to orientation of photos,
(landscape or portrait), trim the collection in column1 to create 
better alignment and limit whitespace ================================================================*/ UpdateContext( { varGetHeight:CountRows(colPhotoCol1Filtered) * 176 } ); UpdateContext( { varGetHeight2:CountRows(colPhotoCol2Filtered) * 176 } ); UpdateContext( { varHeightDif:varGetHeight - varGetHeight2 } ); /*=============================================================== If the difference in height between both columns is greater than 176, trim 1 photo off the first collection ================================================================*/ ClearCollect( colPhotosTrimmed, If( varHeightDif >= 176, FirstN(colPhotoCol1Filtered,varFirstHalfFiltered - 1), FirstN(colPhotoCol1Filtered,varFirstHalfFiltered)) ); /*===============================================================
Set Gallery used to display photos to this variable.
===============================================================*/ Set( var2Columns, "<table>" & "<td valign='Top'>" & Concat( colPhotosTrimmed, "<img src=" & Thumbnail.Large & " style=""max-width:100%;max-height:100%;"">" ) & "</td>" & "<td valign='Top'>" & Concat( colPhotoCol2Filtered, "<img src=" & Thumbnail.Large & " style=""max-width:100%;max-height:100%;"">" ) & "</td>" & "</table>" )

Bugs and known issues

While this issue does not limit the use of this feature in the app, it would be nice to minimize or eliminate the white space altogether. I am actively trying to resolve this issue.

 

image.png

image.png