0

The thumbnail images shown in the default view of a picture library in SharePoint Online are cropped if the image is too big, but our users want to see the full image scaled in the thumbnail to better identify them when all images in a folder are similar, but I can't find how to do this.

I've tried to create a new view with no luck, is there any way to accomplish this?

0

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

First, click “Edit Page”.

enter image description here

Second, add a Script Editor web part. enter image description here

Then, click “EDIT SNIPPET” to insert some JS code into this web part. enter image description here

Next insert the JS Code below into it, this code will let your thumbnails displayed in the center.

<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. enter image description here

Screenshot of result: enter image description here

  • Thanks for the workaround, it's a possible solution, but it only works with classic mode. I need a solution for modern picture libraries. – Asier Peña Nov 6 '17 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.