Trying to replicate the layout of the news.aspx page - main div for row (linked to item), a child div to contain and size up the thumbnail, child divs for thumb, title, description, author etc. The idea is to have the thumb floated left, then the title and description to the right on separate lines with ideally the thumb and title linked to the item.
I have it working except for the div that contains the thumb. I can't seem to figure out why I'm getting a "duplicate children" error on the template I'm using (disregard styling etc - am going blind trying to isolate/configure all the brackets):
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"_comment_": "MAIN DIV",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"align-items": "stretch",
"flex-direction": "row",
"padding": "20px",
"margin-bottom": "16px",
"max-width": "930px",
"border-radius": "8px"
},
"attributes": {
"class": "ms-bgColor-neutralTertiaryAlt"
},
"children": [
{
"elmType": "a",
"attributes": {
"class": "ms-borderColor-neutralLight",
"target": "_blank",
"href": "[$FileRef]"
},
"style": {
"display": "block"
},
"children": [
{
"elmType": "div",
"style": {
"float":"left",
"width": "274px",
"height": "154px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "[$BannerImageUrl]"
},
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "stretch",
"width": "100%",
"height": "100%",
"object-fit": "cover"
}
}
]
}
],
"children": [{
"elmType": "div",
"_comment_": "DIV TWO",
"style": {
"flex-grow": "1",
"display": "flex",
"flex-direction": "column",
"flex-wrap": "nowrap",
"align-items": "center",
"max-width": "310px",
"min-width": "205px",
"margin-top": "8px"
}
}
]
}
]
}
}
