New sample - Photo gallery with likes

[Lou-i3]

Q	A
Bug fix?	no
New sample?	yes

What's in this Pull Request?

New list formatting view sample displaying a photo gallery with likes and likes count.

[tecchan1107]

I've merged this pull request! Please open the following link and check it out. https://github.com/pnp/List-Formatting/tree/master/view-samples/photo-gallery-with-likes

Also, I have modified the README when doing the merge. Please let me know if you have any questions or would like to make any improvements.

Once again, thanks for the great sample @Lou-i3 !! I love this photo gallery😍😍😍✨

[z3019494]

Hi all, thanks for the code! I've played around with it a little to allow

• Grouping by "album name" (really, a single line of text)
• Using this sample with grouped.fielddata to group it into an "album": https://github.com/pnp/List-Formatting/tree/master/view-samples/group-header-status-icon-color

Needs additional columns called:

• PhotoDate
• AlbumTitle (calculated column)

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 300, "width": 420, "hideSelection": true, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "button", "style": { "z-index": "9" }, "attributes": { "class": "sp-card-defaultClickButton", "role": "presentation" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "style": { "position": "relative" }, "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer ms-fontColor-white" }, "children": [ { "elmType": "div", "style": { "position": "absolute", "bottom": "0", "right": "0", "z-index": "10", "overflow": "hidden", "cursor": "pointer", "display": "flex", "align-items": "center", "width": "100%", "background-color": "rgba(0,0,0,0.2)" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-black--hover" }, "style": { "display": "flex", "width": "100%" }, "children": [ { "elmType": "div", "txtContent": "=toLocaleDateString([$PhotoDate]) + ' | ' + [$Title]", "style": { "width": "100%", "padding": "10px" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralLight--hover ms-fontColor-white ms-fontColor-black--hover" }, "style": { "border-radius": "6px", "display": "flex" }, "children": [ { "elmType": "span", "style": { "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'flex', 'none')", "padding": "10px", "align-items": "center" }, "attributes": { "iconName": "Heart" }, "customRowAction": { "action": "setValue", "actionInput": { "LikesTotal": "=Number(length(appendTo([$LikedBy], @me)))", "LikedBy": "=appendTo([$LikedBy], @me)" } }, "children": [ { "elmType": "div", "txtContent": "[$LikesTotal]", "style": { "font-size": "12px", "margin-left": "4px", "font-family": "Segoe UI" } } ] }, { "elmType": "span", "style": { "display": "=if(indexOf([$LikedBy.email], @me) == -1, 'none', 'flex')", "padding": "10px", "align-items": "center" }, "attributes": { "iconName": "HeartFill" }, "customRowAction": { "action": "setValue", "actionInput": { "LikesTotal": "=Number(length(removeFrom([$LikedBy], @me)))", "LikedBy": "=removeFrom([$LikedBy], @me)" } }, "children": [ { "elmType": "div", "txtContent": "[$LikesTotal]", "style": { "font-size": "12px", "margin-left": "4px", "font-family": "Segoe UI" } } ] } ] } ] } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-imageContainer" }, "children": [ { "elmType": "filepreview", "attributes": { "src": "@thumbnail.420x300" }, "style": { "height": "300px" }, "filePreviewProps": { "fileTypeIconClass": "sp-fileTypeIcon-cardDesigner", "brandTypeIconClass": "sp-brandTypeIcon-cardDesigner", "brandTypeIconStyle": { "display": "none" }, "fileTypeIconStyle": { "display": "none" } } } ] } ] } ] } ] }, "groupProps": { "headerFormatter": { "elmType": "div", "style": { "flex-direction": "row" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-css-backgroundColor-BgCyan sp-css-color-CyanFont" }, "style": { "display": "inline-flex", "height": "25px", "border-radius": "15px", "padding-left": "8px", "padding-top": "5px" }, "children": [ { "elmType": "span", "attributes": { "iconName": "PhotoCollection" }, "style": { "padding-right": "6px", "padding-top": "2px" } }, { "elmType": "div", "style": { "display": "inline-flex", "padding-right": "9px" }, "children": [ { "elmType": "div", "txtContent": "= @group.fieldData + ' | '", "attributes": { "title": "=@group.fieldData", "class": "ms-fontWeight-bold" }, "style": { "padding-left": "5px" } }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-bold" }, "txtContent": "=@group.count" }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontWeight-normal" }, "txtContent": "= if(@group.count!= 1,'photos','photo')" } ] } ] } ] } } }

The AlbumTitle field is a calculated SLOT column:

=CONCATENATE(YEAR([Photo Date]),TEXT(MONTH([Photo Date]),"00"),TEXT(DAY([Photo Date]),"00")," ",Title)