Forum Discussion
Solved
Hyperlinked images in a List
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"
}
}
]
}
]
}
]
}
]
}
}
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.
2 Replies
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.
- Thanks for this. It looks like the everything needs to be a child of the 'a' element. Appreciate the help!
