Jan 05 2023 10:11 AM
Hi there -- I'm looking to create a simple list with a few columns of data, plus a column with a URL and a column with an image.
Using a tile-view in a list, I'd like to make the image the background, but allow it to be hyperlinked. But I'm not sure if I'm calling the JSON correctly.
My image column name is $Background; the column with URLs is $HyperLink
Thanks!
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"hideSelection": true,
"width": "150",
"height": "100",
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "150px",
"min-height": "100px",
"margin-right": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "a",
"attributes": {
"target": "_blank",
"href": "[$HyperLink]"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$Background.serverRelativeUrl]"
},
"style": {
"height": "100px",
"max-width": "150px"
}
}
]
},
{
"elmType": "div",
"style": {
"position": "absolute",
"margin-top": "10px",
"height": "100px",
"width": "150px",
"bottom": "0",
"padding-top": "10px",
"background-color": "rgba(0,0,0,0.05)"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#fff",
"margin-top": "40px",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "25px",
"line-height": "16px"
},
"txtContent": "Title"
},
{
"elmType": "div",
"txtContent": "[$SubTitle]",
"style": {
"color": "#fff",
"margin-left": "7px",
"margin-top": "10px",
"width": "130px",
"top": "0",
"font-size": "15px",
"line-height": "12px"
}
},
{
"elmType": "div",
"txtContent": "[$BodyText]",
"style": {
"color": "#fff",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "12px",
"line-height": "18px"
}
}
]
}
]
}
]
}
]
}
}
Jan 06 2023 01:47 AM
Solution@Dan_Garcia Use JSON in view formatting like:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"hideSelection": true,
"width": "150",
"height": "100",
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "150px",
"min-height": "100px",
"margin-right": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "a",
"style": {
"position": "absolute"
},
"attributes": {
"target": "_blank",
"href": "[$HyperLink]"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$Background.serverRelativeUrl]"
},
"style": {
"height": "100px",
"max-width": "150px"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"margin-top": "10px",
"height": "100px",
"width": "150px",
"bottom": "0",
"padding-top": "10px",
"background-color": "rgba(0,0,0,0.05)"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#fff",
"margin-top": "40px",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "25px",
"line-height": "16px"
},
"txtContent": "Title"
},
{
"elmType": "div",
"txtContent": "[$SubTitle]",
"style": {
"color": "#fff",
"margin-left": "7px",
"margin-top": "10px",
"width": "130px",
"top": "0",
"font-size": "15px",
"line-height": "12px"
}
},
{
"elmType": "div",
"txtContent": "[$BodyText]",
"style": {
"color": "#fff",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "12px",
"line-height": "18px"
}
}
]
}
]
}
]
}
]
}
]
}
}
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
Jan 06 2023 06:34 AM
Jan 06 2023 01:47 AM
Solution@Dan_Garcia Use JSON in view formatting like:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"hideSelection": true,
"width": "150",
"height": "100",
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"display": "inline-block",
"min-width": "150px",
"min-height": "100px",
"margin-right": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "a",
"style": {
"position": "absolute"
},
"attributes": {
"target": "_blank",
"href": "[$HyperLink]"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$Background.serverRelativeUrl]"
},
"style": {
"height": "100px",
"max-width": "150px"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"margin-top": "10px",
"height": "100px",
"width": "150px",
"bottom": "0",
"padding-top": "10px",
"background-color": "rgba(0,0,0,0.05)"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"style": {
"color": "#fff",
"margin-top": "40px",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "25px",
"line-height": "16px"
},
"txtContent": "Title"
},
{
"elmType": "div",
"txtContent": "[$SubTitle]",
"style": {
"color": "#fff",
"margin-left": "7px",
"margin-top": "10px",
"width": "130px",
"top": "0",
"font-size": "15px",
"line-height": "12px"
}
},
{
"elmType": "div",
"txtContent": "[$BodyText]",
"style": {
"color": "#fff",
"margin-left": "7px",
"width": "150px",
"top": "0",
"font-size": "12px",
"line-height": "18px"
}
}
]
}
]
}
]
}
]
}
]
}
}
Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.