![見出し画像](https://assets.st-note.com/production/uploads/images/129943440/rectangle_large_type_2_57ab6387ff5f29f05ab5352b9c5f393b.png?width=1200)
SharePoint┃画像列の画像サイズ変更
サイトのページで表示される一覧に画像列を追加したときに使えるJSONコードです。
画像列の書式にJSONを追加
width:200px に対する16:9の値をheightに入れています。
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"children": [
{
"elmType": "img",
"attributes": {
"src": "@currentField.serverRelativeUrl"
},
"style": {
"width": "200px",
"height": "113px",
"margin": ".3em 0"
}
}
]
}
クリックすると別タブで画像を開く
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"attributes": {
"href": "@currentField.serverRelativeUrl",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "@currentField.serverRelativeUrl"
},
"style": {
"width": "200px",
"height": "113px",
"margin": ".3em 0"
}
}
]
}
マウスオーバーで右側に画像を拡大表示
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"attributes": {
"href": "@currentField.serverRelativeUrl",
"target": "_blank"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "@currentField.serverRelativeUrl"
},
"style": {
"width": "200px",
"height": "113px",
"margin": ".3em 0"
},
"customCardProps": {
"openOnEvent": "hover",
"directionalHint": "rightCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
},
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "img",
"attributes": {
"src": "@currentField.serverRelativeUrl"
},
"style": {
"width": "300px",
"padding": ".5em"
}
}
]
}
}
}
]
}
参考にしたサイト
この記事が気に入ったらサポートをしてみませんか?