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

 

Meet Our Blog Authors
  • PowerApps Community Mentor 2018, Practicing surgeon and former Professor of Surgery, University of Illinois, Chicago.
  • I am the Owner/Principal Architect at Don't Pa..Panic Consulting. I've been working in the information technology industry for over 30 years, and have played key roles in several enterprise SharePoint architectural design review, Intranet deployment, application development, and migration projects. I've been a Microsoft Most Valuable Professional (MVP) 12 consecutive years and am also a Microsoft Certified SharePoint Masters (MCSM) since 2013.
  • My name is Timothy Shaw and I create digital solutions using the Power Platform, Office 365, and Azure SQL and handle the IT for a small company in the energy sector. When not building the future :), I enjoy playing guitar, good (or really bad!) sci-fi, Xbox therapy, and hanging with my wife and son. Twitter: @ShortForTim