I would like to display images in a thumbnail/Tile view but also with multiple links to different resolution of the image. It works ok in a list view when i click on the images.
But can't even get the link to display in the Tile view I want this layout. Thanks in Advance
See my snippet below
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 423,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-imageContainer"
},
"children": [
{
"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.512x432"
},
"style": {
"height": "200px"
},
"filePreviewProps": {
"fileTypeIconClass": "sp-fileTypeIcon-cardDesigner",
"brandTypeIconClass": "sp-brandTypeIcon-cardDesigner"
}
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!FileLeafRef.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-keyboard-focusable"
},
"txtContent": "[$FileLeafRef]",
"defaultHoverField": "[$FileLeafRef]"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Editor.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-neutralPrimary sp-card-userContent ",
"title": "[$Editor.title]"
},
"children": [
{
"elmType": "p",
"txtContent": "=if(length([$Editor]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Editor]",
"elmType": "p",
"defaultHoverField": "[$personIterator]",
"style": {
"display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
},
"txtContent": "[$personIterator.title]"
},
{
"elmType": "p",
"txtContent": "=if(length([$Editor]) > 1, ', +' + (length([$Editor]) - 1) , '')"
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Modified.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Modified.displayValue] == '', '–', [$Modified.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "a",
"style": {
"border-radius": "5px",
"margin": "5px 0px",
"padding": "5px",
"border": "3px",
"text-decoration": "none",
"font-weight": "bold",
"color": "black",
"background-color": "lightblue"
},
"txtContent": "..",
"attributes": {
"target": "_blank",
"href": "https://xxxxxx.sharepoint.com/sites/PhotoLibrary/_layouts/15/getpreview.ashx?resolution=1&path=' + [$FileRef]"
}
},
{
"elmType": "span",
"txtContent": " | "
}
]
}
]
}
]
}
}
