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?
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
    $(".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
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.
Posts: 6
Joined: Fri Jun 05, 2015 7:00 am

Return to Org Chart for SharePoint 2013