I have a document library that I want users to be able to add a photo to with a title and descriptions and others be able to hover over the pic in gallery view and see the description AND be able to "like" the pic as well.
I have most of this figured out but can't get the text to show in my hover:
{
"$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"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"font-size": "12px",
"color": "black",
"padding": "5px"
}
},
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
}
}
},
{
"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"
}
}
}
]
}
]
}
]
}
]
}
}
Descriptionfield value because your JSON looks correct anyway. By defaultDescriptionfield is read only so you can follow this to enable it. Please try it and let know whether it works for you or not