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 backg...
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.
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!
