I have a question about image-lightbox-advanced.json

[thanhrieker]

Hello,

Very nice to get many sample of columns format list here. Thanks you.

Sample (which sample are you talking about)

https://github.com/pnp/List-Formatting/blob/master/column-samples/image-lightbox/image-lightbox-advanced.json

Question (the more details, the better)

I try to implement the sample above to our sharepoint list with Image column type but image is not show up.

Could you please help me? @thechriskent

Thanks Thanh

[tecchan1107]

Hi @thanhrieker ! How about the following code, I changed it to use the getThumbnailImage operator.

Sample Code (Click to open/close)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "=if(@currentField,'block','none')", "overflow": "hidden", "margin": "8px auto -3px -4px", "cursor": "pointer" }, "attributes": { "title": "@currentField.fileName" }, "children": [ { "elmType": "img", "style": { "max-width": "64px", "max-height": "64px" }, "attributes": { "src": "=getThumbnailImage(@currentField,48,48)" }, "customCardProps": { "formatter": { "elmType": "div", "style": { "padding": "8px", "background-color": "black" }, "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage(@currentField,ceiling(@window.innerWidth*0.5),ceiling(@window.innerHeight*0.5))", "title": "@currentField.fileName" }, "style": { "background-color": "#e6e6e6", "max-width": "=(@window.innerWidth*0.5)+'px'", "max-height": "=(@window.innerHeight*0.5)+'px'" } }, { "elmType": "a", "attributes": { "iconName": "OpenInNewWindow", "href": "=@currentField.serverRelativeUrl", "target": "_blank", "class": "ms-bgColor-black ms-fontColor-white ms-fontColor-themeLight--hover", "title": "Open in New Window" }, "style": { "font-size": "18px", "text-decoration": "none", "position": "absolute", "right": "2px", "bottom": "2px", "padding": "8px" } } ] }, "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "black" } } } ] } ```

[thanhrieker]

Hi @thanhrieker ! How about the following code, I changed it to use the getThumbnailImage operator. Sample Code (Click to open/close)

Hi @tecchan1107

Thanks you for your code. And the getThumbnailImage operator just resize image/picture from real picture and show up.

It is not like other code. I need the code query direct thumbnail from Microsoft Graph to save loading time for the Sharepoint List.

Do you have other solution for that?

Thanks you Thanh

[tecchan1107]

Sorry, I do not know how to do that at this time.

[thanhrieker]

I see the Microsoft support the property here:

https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference

But why it show blank src link. Some other setting needed?

[thanhrieker]

I see the Microsoft support the property here:

https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference

But why it show blank src link. Some other setting needed?

I just did a report issue to Microsoft:

https://github.com/SharePoint/sp-dev-docs/issues/9239