List and change image size

Question

I have created a SharePoint list. Within this list I also added the column "Hyperlink or Picture". In the field settings I selected to format the url as a picture. This works fine.

However, now I want to resize the picture to a certain size. I have read as a possibility that I could at the script editor webpart (see: Sharepoint list view with Thumbnail image). The script editor is unfortunately not available to me.

Column-formatting (see: column formatting to customize SharePoint) is available to me. Now I was wondering if I cannot use that to format my column? Since what I want to do is change the style... Therefor I came up with the following JSON.

{
   "elmType": "img",
   "txtContent": "@currentField",
   "style": {
      "width": "50px",
      "height": "50px",
   }
}

Unfortunatly this does not work. Is this because my JSON is incorrect? Or is this not possible to do at all using the column formatting?

Answer 1

You can try this:

    {
"elmType": "img",
"txtContent": "",
"style": {
    "width": "80px",
    "height": "60px"
},
"attributes": {
    "src": {
        "operator": "+",
        "operands": [
            "https://tenant.sharepoint.com",
            "@currentField"
        ]
    }
}
}

The path might need some adjustment but this should work.

Answer 2

Here is a solution for you which I have tested successfully.

First, click “Edit Page”.

Second, add a Content Editor web part.

Then, click “Click here to add new content”.

Next, click "Edit Source" to insert the JS code below.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function () {
    var boxWidth = $(".ms-tileview-tile-content").width();
    var boxHeight = $(".ms-tileview-tile-content").height();
    var img = $("img.ms-positionRelative");
    img.attr("class", "");
    function DrawImg(boxWidth, boxHeight) {
        var imgWidth = img.width();
        var imgHeight = img.height();

        //compare the width and height
        if ((boxWidth / boxHeight) >= (imgWidth / imgHeight)) {

            //reset the width and height of img
           img.width((boxHeight * imgWidth) / imgHeight);
           img.height(boxHeight);

            //display img in center
            var margin = (boxWidth -img.width()) / 2;
           img.css("margin-left", margin);
        } else {

            //reset the width and height of img
           img.width(boxWidth);
           img.height((boxWidth * imgHeight) / imgWidth);

            //display img in center
            var margin = (boxHeight -img.height()) / 2;
           img.css("margin-top", margin);
        }
    }
    DrawImg(boxWidth, boxHeight);
});

</script>

Last, click “stop editing” to save you change and you will see what you want.

Screenshot of result: