JSLink to custom list to render people column in detail with picture

I  create a custom list, and create a poeple column to store poeple detail info with picture in this list, the custom list with following people:Name1, Name2, NAme3, Name4.

here is the list info:

Then Display custom list webpart into 2 columns in webpart section, here is the picture:

I render the webpart with JSLink, JSLink is greate! here is the code.

(function () {
 
var itemCtx = {};
itemCtx.Templates = {};
 
itemCtx.Templates.Header = "<span></span>";
itemCtx.Templates.Item =  ItemOverrideFun ;
itemCtx.Templates.Footer =  "";
 
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 100;
 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
 })();
 
function ItemOverrideFun(ctx) {
 
    if (ctx.CurrentItem.Name[0].picture == "")
    {
        ctx.CurrentItem.Name[0].picture = "_layouts/images/O14_person_placeHolder_96.png";
    }
    return "<div style ='float:left;width: 206px;height:40px;margin-bottom:13px'>" +

                                // status
                                "<div style ='float: left;width: 4px; height:40px;overflow:hidden;' class='ms-tableCell'>" +
                                "<span class='ms-imnSpan'>" +
                                "<a href='#' οnclick='IMNImageOnClick(event);return false;' class='ms-imnlink ms-spimn-presenceLink' >" +
                                "<span class='ms-spimn-presenceWrapper ms-spimn-imgSize-8x72'  >" + //4*36 //5x36x32
                                "<img name='imnmark' title='' ShowOfflinePawn=  '1' class='ms-spimn-img ms-spimn-presence-disconnected-8x72x32' src='/_layouts/15/images/spimn.png?rev=23' alt='User   Presence' sip='" + ctx.CurrentItem.Name[0].email + "' id='imn_1" + ctx.CurrentItem.Name[0].email + ",type=sip' />" +
                                "</span></a></span></span></div>" +

                                //picture
                                "<div style ='float: left;width: 41px; height:40px;overflow:hidden;' class='ms-tableCell ms-verticalAlignTop'>" +
                                "<div class='ms-peopleux-userImgDiv' style ='width: 41px; height:40px;'>" +
                                "<span class='ms-imnSpan'>" +

                                "<a href='#' οnclick='IMNImageOnClick(event);return false;' class='ms-imnlink' tabIndex='-1'>" +
                                "<img name='imnmark' title='' ShowOfflinePawn='1' class=' ms-hide' src='/_layouts/15/images/spimn.png?rev=23' alt='User Presence' sip='" + ctx.CurrentItem.Name[0].email + "'  id='imn_2" + ctx.CurrentItem.Name[0].email + ",type=sip' />" +
                                "<span class='ms-peopleux-imgUserLink'>" +
                                "<span class='ms-peopleux-userImgWrapper' style='width:41px; height:40px'>" +
                                "<img style='min-width:41px; min-height:40px; clip:rect(0px, 41px, 40px, 0px); max-width:41px' src=" + ctx.CurrentItem.Name[0].picture + " alt=' Ram' />" +
                                "</span></span></a></span>" +
                                "</div>" +
                                "</div>" +

                                "<div style ='float: left; margin-left:9px;'>" +
                                //name
                                "<div style = 'Color:X#000000;font-size:12px;max-width: 150px;'>" + ctx.CurrentItem.Name[0].title + "</div>" +
                                //email
                                "<div style ='height:19px;font-size:12px;' >" +
                                "<a style = 'Color:#0072c6;' class='ms-subtleLink' οnclick='GoToLinkOrDialogNewWindow(this);return false;' href='/_layouts/15/userdisp.aspx?ID=" + ctx.CurrentItem.Name[0].ID +
                                "' id='ProfileLink" + ctx.CurrentItem.Name[0].email + "'>" + ctx.CurrentItem.Name[0].email +
                                "</a>" +
                                "</div>" +
                                "</div>" +

                                "</div>";
                                


}

 

More info about how to deploy the code see my last blog:http://blog.youkuaiyun.com/tristan_dong/article/details/12621033

And the lync detail to : http://blog.youkuaiyun.com/tristan_dong/article/details/10432793