I am using SharePoint Online Picture library, where images are being displayed in tiles view.
I noticed that thumbnail image contains Filename + Modified date on the tiles as per below screenshot.
Is it possible to show Title of the image + Modified date on the Tiles ?
I tried formatting the JSON for entire row in Modern view, able to get the Title of the column, but the tile becomes non-clickable.
Based on below screenshot, title MyImage should be shown in place of 20170915_095235.jpg
For modern experience in SharePoint Online, I assume using JSON formatting will be a good way to change the text displayed on the thumbnail. Per my test, after applying still I can click on the thumbnail and open it in a new tab.
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": "true",
"hideSelection": false,
"tileProps": {
"hideSelection": false,
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLighter ms-bgColor-neutralSecondaryAlt--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"width": "100%",
"height": "100%",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"margin": "auto",
"text-align": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "@thumbnail.large"
}
},
{
"elmType": "div",
"style": {
"margin": "auto",
"font-size": "16px",
"text-align": "center"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"font-size": "13px",
"font-style": "oblique",
"text-align": "left",
"padding": "5px"
},
"txtContent": "[$Modified]"
}
]
}
]
}
]
}
}
}
I edited a bit from the json code from a blog and worked. Reference:https://devscopeninjas.azurewebsites.net/2019/12/19/tiles-view-formatting-thumbnail-along-with-description-and-keywords/
Update
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"margin": "auto",
"text-align": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if(indexOf([$FileLeafRef],'.')>0,'@thumbnail.medium','https://spoprod-a.akamaihd.net/files/fabric-cdn-prod_20200921.001//office-ui-fabric-react-assets/foldericons/lg-bg.svg')"
}
},
{
"elmType": "div",
"style": {
"margin": "auto",
"font-size": "16px",
"text-align": "center"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"font-size": "13px",
"font-style": "oblique",
"text-align": "left",
"padding": "5px"
},
"txtContent": "[$Modified]"
}
]
}
]
}
}
}
Is it not possible to have same folder preview at parent level, as we have in modern view like below ?
