Closed Lou-i3 closed 1 year ago
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😍😍😍✨
Hi all, thanks for the code! I've played around with it a little to allow
Needs additional columns called:
{ "$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)
What's in this Pull Request?
New list formatting view sample displaying a photo gallery with likes and likes count.