photo-gallery-with-likes | List Formatting Gallery

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 210, "width": 254, "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", "background-color": "rgba(0,0,0,0.2)", "border-radius": "6px" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-black--hover" }, "style": { "display": "flex", "width": "100%" }, "children": [ { "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.512x432" }, "style": { "height": "200px" }, "filePreviewProps": { "brandTypeIconStyle": { "display": "none" }, "fileTypeIconStyle": { "display": "none" } } } ] } ] } ] } ] } }

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 210, "width": 254, "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": "[$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.512x432" }, "style": { "height": "200px" }, "filePreviewProps": { "brandTypeIconStyle": { "display": "none" }, "fileTypeIconStyle": { "display": "none" } } } ] } ] } ] } ] } }

From the contributor

How to use this sample

Summary

This sample demonstrates formatting a document library gallery view into a photo gallery showing title and likes.

screenshot of the sample

There is also a version that has no title and shows only likes.

screenshot of the sample

View requirements

The view must be set to gallery.
This format expects the following columns to be part of the view:

Type	Internal Name	Required
Single line of text	Title	No
Number	LikesTotal	No
Multi-Person	LikedBy	No

Sample

Solution	Author(s)
photo-gallery-with-likes.json	Lou-i3
photo-gallery-no-title.json	Lou-i3

Version history

Version	Date	Comments
1.0	October 21, 2022	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

The file name can also be displayed by setting the txtContent property as follows.

"txtContent": "=substring('[$FileLeafRef]',0,lastIndexOf([$FileLeafRef],'.'))"

Get this format

How to use this sample

Summary

View requirements

Sample

Version history

Disclaimer

Additional notes

More formats like this

Key Dates Timeline Checklist

Sports Card

Credit / Loyalty Card