I would like to get the thumbnail from an url and use it with qtip2.

And I can see that some item display templates are able to generate those thumbnails from the url, but I don't need to use the search content web part.

I have used the same display template: Item_WebPage_HoverPanel.html that generates it's .js correspondent script, but I have got some bugs. I made some modifications like described in here, but it was not enought. I am getting some bugs saying that Srch element is not defined. I have tested in a page that is using this display item template, I have changed the url and it is displaying fine the links, even links from the internet.

I have tried to use the url directly on the qtip2 and it is opening an iframe with the page directly, where you can interact with that. That is not what I would like to have.

PagePeeker is a service that is able to do it, but it is an external service and it just works on internet, it doesn't search in the intranet.

To be clear, the question is: How can I take advantage of the item display template from SharePoint to show thumbnails for intranet and internet ? I don't need to crawl anything.

EDIT: I was able to load all required scripts for displaying template run without errors by exporting the search result webpart and importing in my page. No I would like to hide the div where this webpart is made and apply the hover panel in a container div related with the http link I would add to this div. I have also discovered that the preview screenshot is SharePoint is an iframe where you can't interact.

That is used for creating an iframe and is embedded in the page.

  • I am not clear on what question you are asking. Commented Nov 5, 2016 at 12:05
  • @MatthewMcDermott I edited the question at the end to make it more clear. I don't need any crawling or webpart related with the search, but only it's javaScript that allows me to use thumbnails.
    – Tito
    Commented Nov 7, 2016 at 8:22

1 Answer 1


It seems that the search content result that uses the default item display template (item_site_hoverpanel.js) for hovering has the method bellow:

It first gets an iframe by using the method:

Srch.SiteSearchUtil.populateSiteSearchResults(ctx.CurrentItem.csr_Path, siteResultsId, query, id + HP.ids.noData, timeZoneId);

Later it loads the already downloaded iframe, if you hover again.

                AddPostRenderCallback(ctx, function(){ULSqag:;
                    HP.loadSiteViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, id + HP.ids.viewer, ctx.CurrentItem.csr_Path, "glass_" + id + HP.ids.viewer);

The method loadSiteViewer method is defined at the SearchUI.debugger.js file as:

        this.loadSiteViewer = function(resultId, hpId, iframeId, viewerUrl, glassViewerId){
            var result = $get(resultId);
            var iframe = $get(iframeId);  
            var glassViewer = $get(glassViewerId);          
            var hp = $get(hpId);
            if(result && iframe && hp && glassViewer){

I don't know if there is any SharePoint security checking on those iframes, but some websites are possible to be loaded from intranet, others not (www.google.com), for example, since they have some iframe protection.

Since Google is sending an "X-Frame-Options: SAMEORIGIN" response header.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.