Use the Thumbnail-version of profile picture?

by Ona » Fri Sep 01, 2017 7:18 am

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 <user>_MThum.jpg? Or another tip to handle this?
Ona
 
Posts: 6
Joined: Fri Jun 05, 2015 7:00 am

by Anna » Fri Sep 01, 2017 2:08 pm

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:

Code: Select all
.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:

Code: Select all
 
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
User avatar
Anna
 
Posts: 26
Joined: Mon Aug 14, 2017 6:55 am

by Ona » Sun Sep 03, 2017 6:25 am

Thank you very much! This works fine.
Ona
 
Posts: 6
Joined: Fri Jun 05, 2015 7:00 am


Return to Org Chart for SharePoint 2013

cron