Sharepoint list image format size

Question

Hello,

I have a custom list in Sharepoint. I have a Picture column. How can I make the images bigger using json?

I've seen some code, but it's not working for me. The Column size increases but then the images don't show.

Answer 1

Hi @Jason H ,

Here is my code which has been tested and worked fine in my environment:

{  
  "elmType": "div",  
  "children": [  
    {  
      "elmType": "img",  
      "attributes": {  
        "src": "@currentField",  
        "title": "=if(@currentField == '', 'No picture available', @currentField)"  
      },  
      "style": {  
        "position": "relative",  
        "top": "50%",  
        "left": "50%",  
        "width": "200px",  
        "height": "200px",  
        "margin-left": "-50%",  
        "margin-top": "0%"  
      }  
    }  
  ]  
}  

You can refer to it and customize “style” attributes to format your Picture column:

I hope this information has been useful, please let me know if you still need assistance.

==========
Update==========
Your issue should be caused by JSON can’t retrieve the picture via URL.

Where did you get the URL of the picture? From the lists/libraries in SharePoint or Internet or file share? Could you give me a sample?

Also, you can test whether the pictures can be displayed if you open the picture URLs in the browser directly.

If the URLs are from a SharePoint site, check whether you copy the URL like the following way:
Go to the list/library where the picture in -> right click the picture item -> details -> click the icon next to Path:

Please do not use “Copy Link” in the ribbon to copy the URLs, in my test, it may cause errors.

==========
Update==========
@Jason H ,

I want to confirm with you whether it is an image type column?

Both the two types can display images in a list:

I tested the JSON code based on a Picture type column before and it worked. Also, I tested it based on the image type column and it failed with the same error in your last comment.

So I modified the JSON as following:

{  
   "elmType": "div",  
   "children": [  
     {  
       "elmType": "img",  
       "attributes": {  
         "src": "@currentField.serverRelativeUrl",  
         "title": "=if(@currentField.serverRelativeUrl == '', 'No picture available', @currentField)"  
       },  
       "style": {  
         "position": "relative",  
         "top": "50%",  
         "left": "50%",  
         "width": "200px",  
         "height": "200px",  
         "margin-left": "-50%",  
         "margin-top": "0%"  
       }  
     }  
   ]  
}  

It worked fine in my image column now. You can refer to it to format your column and you needn’t to move the pictures to the SharePoint site.

Sorry for my misunderstanding.

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hello @Allen Xu_MSFT

Your answer was really helpful. I would like to have your input on something. Most of the images that goes into thumbnail in my list are not having 1:1 aspect ratio. Now when I use your code some of the thumbnails are looking odd. Is there some way you can update this code to use a fixed width of 200px and height should be with respect to the original aspect ratio of the image( If the size of my original image was 800x600, i want the thumbnail size to be 200x150?

Answer 3

Hello...
This helped me a lot, thanks @Allen Xu_MSFT

I have another challange now.

I'm using the Hyperlink (as an image) column type and I'd like that column to automatically source the image from a folder in sharepoint...and use the value from of another column as part of the URL. (

i..e:

• I host all the images in a folder called 'Profile Pictures' (...sites/My Team/SiteAssets/Images/Profile%20Pictures)
• I name the image files using First Name and Last Name (Robert Murphy.png)
• The Title column on my Microsoft List is for First Name + Last Name (Robert Murphy)
• I now would like my hyperlink column to source the image from my Profile Pictures folder using the First Name + Last name as part of the URL

i.e: sites/My Team/SiteAssets/Images/Profile%20Pictures/Robert Murphy.png
sites/My Team/SiteAssets/Images/Profile%20Pictures / Ben Wallace.png
and so on

Is there a way of doing that?? Searched online but no luck

Thanks in advance