Use the Thumbnail-version of profile picture?

Org Chart SharePoint 2013/2016 version
1

Is it possible to use the Thumbnail-version of the Profile picture i the Org Chart? I now use PictureURL and the problem is that some user profile picture is in format Landscape and other in Portrait. I want to display the users picture in the same size (both height and width) for all users without the picture to get distorted. And the pictures must be centered horisontally anf vertically. I can use the CSS like this:

.pl-item-photo img {
width: 60px;
height: 60px;
object-fit: cover;
}

This works fine in Chrome and other browsers, but not in IE-11. Unfortunally I have to get it work in IE-11. So I wonder if I can use the thumbnail version of the picture, like _MThum.jpg? Or another tip to handle this?

2

Hi Ona,

Thank you for your question.

You may center both landscape and portrait pictures by setting them as background images.

For that, please, add some custom CSS:

.pl-item-photo .detailsTooltipLink{
  width: 56px;
  height: 56px;
  position: relative;
  display: block;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

add the following code to the CustomJavaScript tab:

renderer.onLoadingFinished(function(){  
    $(".detailsTooltipLink img").each(function(){
        var imgUrl = $(this).attr("src");
        imgUrl = imgUrl.replace('size=L&',''); // To have our images in appropriate quality after we stretch it with "background-size: cover"
        $(this).parent(".detailsTooltipLink").css("background-image", "url("+imgUrl+")").find("img").css("visibility", "hidden"); // Setting the pictures as the backgroung for the outer .detailsTooltipLink elements and hiding the images themselves
    }); 
});

Best regards,
Anna Dorokhova
Plumsail Team

3

Thank you very much! This works fine.