Forum Discussion
Dan_Garcia
Jan 05, 2023Copper Contributor
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...
- Jan 06, 2023
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.
ganeshsanap
Jan 06, 2023MVP
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
Jan 06, 2023Copper Contributor
Thanks for this. It looks like the everything needs to be a child of the 'a' element. Appreciate the help!