none
SharePoint 2013 - People Search Results Hover Panel how do you display UserPhoto_Lthumb.jpg?

    Question

  • I'm currently customizing our Item_Person_HoverPanel.html display template and I've been asked to display a larger version of the user photo image when hovering over the search results.

    When I use ctx.CurrentItem.PictureURL it is returning the MThumb.jpg of the user photo. 

    Is there a way to display the Lthumb.jpg image instead of the Mthumb.jpg image?

    Below is the snippet that is currently returning the image in the Item_Person_HoverPanel.html template.

    <!--#_ 
                                            if(uPicUrl == true) {
    _#-->
                                                <div id="PictureURL" >
    <!--#_ 
                                                    var encodeduPicUrl = $htmlEncode(ctx.CurrentItem.PictureURL);
                                                    var displayuPicUrl = Srch.U.getSingleHHXMLNodeValue(hhProps, "pictureurl");
                                                    if ($isEmptyString(displayuPicUrl)) { displayuPicUrl = encodeduPicUrl }
    _#--> 
                                                    <div id="uPicUrlValue" class="ms-srch-ellipsis" title="_#= encodeduPicUrl =#_"><img src=" _#= displayuPicUrl =#_ " alt=" _#= displayuPicUrl =#_" height="200px" width="200px" /> </div>
                                                </div>
    <!--#_ 
                                            }
    _#-->
    
    
    

    Tuesday, September 29, 2015 5:13 AM

Answers

  • Hi Noel,

    You can replace the PictureUrl string with Mthumb as Lthumb and adjust the height and width of the div.

    Thanks.


    A'Kumar

    • Marked as answer by Noel Taboada Friday, October 23, 2015 2:23 AM
    Tuesday, September 29, 2015 6:51 AM
  • I figured it out using A'Kumars suggestion replacing the string. Details below. Thank you again A'Kumar

    var uPicLThumb = displayuPicUrl.replace("_MThumb","_LThumb")

    Complete Block as follows

    <!--#_ 
                                            if(uPicUrl == true) {
    _#-->
                                                <div id="PictureURL" >
    <!--#_ 
                                                    var encodeduPicUrl = $htmlEncode(ctx.CurrentItem.PictureURL); 
                                                    var displayuPicUrl = Srch.U.getSingleHHXMLNodeValue(hhProps, "pictureurl");
                                                    if ($isEmptyString(displayuPicUrl)) { displayuPicUrl = encodeduPicUrl };
                                                    var uPicLThumb = displayuPicUrl.replace("_MThumb","_LThumb")
    _#--> 
                                                    <div id="uPicUrlValue" class="ms-srch-ellipsis" title="_#= encodeduPicUrl =#_" style="padding-bottom:5px;"><img src=" _#= uPicLThumb =#_ " alt=" _#= displayuPicUrl =#_" /></div>
                                                </div>
    <!--#_ 
                                            }
    _#-->
    


    Noel Taboada SharePoint Enthusiast

    • Marked as answer by Noel Taboada Friday, October 23, 2015 2:23 AM
    Friday, October 23, 2015 2:22 AM

All replies

  • Hi Noel,

    You can replace the PictureUrl string with Mthumb as Lthumb and adjust the height and width of the div.

    Thanks.


    A'Kumar

    • Marked as answer by Noel Taboada Friday, October 23, 2015 2:23 AM
    Tuesday, September 29, 2015 6:51 AM
  • Thanks for your reply A'Kumar.

    Not sure what you mean by replace the PictureURL string. Can you please provide Syntax?

    Regards,

    Noel


    Noel Taboada SharePoint Enthusiast

    Thursday, October 01, 2015 12:36 AM
  • I figured it out using A'Kumars suggestion replacing the string. Details below. Thank you again A'Kumar

    var uPicLThumb = displayuPicUrl.replace("_MThumb","_LThumb")

    Complete Block as follows

    <!--#_ 
                                            if(uPicUrl == true) {
    _#-->
                                                <div id="PictureURL" >
    <!--#_ 
                                                    var encodeduPicUrl = $htmlEncode(ctx.CurrentItem.PictureURL); 
                                                    var displayuPicUrl = Srch.U.getSingleHHXMLNodeValue(hhProps, "pictureurl");
                                                    if ($isEmptyString(displayuPicUrl)) { displayuPicUrl = encodeduPicUrl };
                                                    var uPicLThumb = displayuPicUrl.replace("_MThumb","_LThumb")
    _#--> 
                                                    <div id="uPicUrlValue" class="ms-srch-ellipsis" title="_#= encodeduPicUrl =#_" style="padding-bottom:5px;"><img src=" _#= uPicLThumb =#_ " alt=" _#= displayuPicUrl =#_" /></div>
                                                </div>
    <!--#_ 
                                            }
    _#-->
    


    Noel Taboada SharePoint Enthusiast

    • Marked as answer by Noel Taboada Friday, October 23, 2015 2:23 AM
    Friday, October 23, 2015 2:22 AM
  • On the same subject, how do you increase the photo size in the search results page itself, from MThumb to LThumb?

    The rendering looks like its from Javascript

    <!--#_
                        AddPostRenderCallback(ctx, function(){
                            EnsureScriptFunc("clienttemplates.js", "RenderUserFieldWorker", function() {
                                var getUserPersona = function() {
                                    var renderCtx = new ContextInfo();
                                    renderCtx.Templates = {};
                                    renderCtx.Templates["Fields"] = {};
                                    var fieldSchemaData = { "PictureOnly":"1", "PictureSize": "Size_128px"};
                                    var listSchema = {"EffectivePresenceEnabled": "1", "PresenceAlt": Srch.Res.item_People_NoPresenceAvailable};
                                    var userData = {"title": uName, "email": uEmail, "picture": uPicUrl, "sip": uSip};
                                    var personaControlElement = document.getElementById(userPersonaId);
                                    if (!Srch.U.n(personaControlElement))
                                    {
                                        personaControlElement.innerHTML = RenderUserFieldWorker(renderCtx, fieldSchemaData, userData, listSchema);
                                    }
                                    if (typeof(ProcessImn) != "undefined") { ProcessImn(); }
                                };
                                getUserPersona();
                            });
                        });
    _#-->  


    Steve W

    Tuesday, June 05, 2018 8:36 PM