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>
    <!--#_ 
                                            }
    _#-->
    
    
    

    mardi 29 septembre 2015 05:13

Réponses

  • Hi Noel,

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

    Thanks.


    A'Kumar

    • Marqué comme réponse Noel Taboada vendredi 23 octobre 2015 02:23
    mardi 29 septembre 2015 06:51
  • 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

    • Marqué comme réponse Noel Taboada vendredi 23 octobre 2015 02:23
    vendredi 23 octobre 2015 02:22

Toutes les réponses

  • Hi Noel,

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

    Thanks.


    A'Kumar

    • Marqué comme réponse Noel Taboada vendredi 23 octobre 2015 02:23
    mardi 29 septembre 2015 06:51
  • 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

    jeudi 1 octobre 2015 00:36
  • 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

    • Marqué comme réponse Noel Taboada vendredi 23 octobre 2015 02:23
    vendredi 23 octobre 2015 02:22
  • 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

    mardi 5 juin 2018 20:36