Unable to find a way to show the document type icon inside my Search Result web-part, as some icons have .gif format while other are .png

Question

I am working on a Search result web-part, which should show documents from multiple document libraries. now i am trying to display the FileType icon beside the items. so i tried the following appraoch inside the display template:-

Fist i get the FileType for the document:-

var ft = $getItemValue(ctx, "FileType");
var iconURL = String.format('/_layouts/images/ic{0}.gif',ft)

then i render the src as follow:-

<img src="_#= iconURL =#_" />

now the above appraoch has render icons for HTML , png images correctly. but fail to do so for icons related to MS word,pdf,xls.. now i check the actual path and seems so icons will have .gif format while other will have .png format, here are some icons paths:-

/_layouts/15/images/icpdf.png
/_layouts/15/images/ichtm.gif
/_layouts/15/images/icxlsx.png
/_layouts/15/images/icxls.png
/_layouts/15/images/icpng.gif
/_layouts/15/images/icdocx.png

so can anyone adivce if there is a way to show the icon file type inside the Search result webpart, which will work for all the types (with .png or with .gif)? Thanks

Answer 1

You could try and do it with styles instead. See the below example. Place the STYLE portion of the example in a Script Editor web part. Surround your own SEARCH HTML with a container DIV that has an id of "mySearchResults" and you should hopefully be good to go.

<!-- Example DIV -->
<div id="mySearchResults">
<a href="/Documents/MyWord.docx" target="_blank">My Word</a><br />
<a href="/Documents/My.gif" target="_blank">My GIF</a><br />
<a href="/Documents/My.jpg" target="_blank">My JPG</a><br />
<a href="/Documents/My.jpeg" target="_blank">My JPEG</a><br />
<a href="/Documents/My.png" target="_blank">My PNG</a><br />
<a href="/Documents/My2.GIF" target="_blank">My GIF 2 - Extentions are case sensitive</a><br />
</div>


<style type="text/css">
#mySearchResults A { font-weight: bold; }

#mySearchResults A { display: block; padding-left: 22px; }
#mySearchResults A { /* default to generic document icon if link's extension is not in the below list */
background-repeat: no-repeat;
background-position: left 0px;
min-height: 20px;
background-image: url('/_layouts/15/images/icgen.gif');
}
/* EXTENTIONS ARE CASE SENSITIVE - You may need to make all link extensions lower case */
#mySearchResults A[href$='.pdf'] { background-image: url('/_layouts/15/images/pdf.gif'); }
#mySearchResults A[href$='.zip'] { background-image: url('/_layouts/15/images/iczip.gif'); }
#mySearchResults A[href$='.gif'] { background-image: url('/_layouts/15/images/icgif.gif'); }
#mySearchResults A[href$='.jpg'] { background-image: url('/_layouts/15/images/icjpg.gif'); }
#mySearchResults A[href$='.jpeg'] { background-image: url('/_layouts/15/images/icjpeg.gif'); }
#mySearchResults A[href$='.png'] { background-image: url('/_layouts/15/images/icpng.gif'); }
#mySearchResults A[href$='.wmv'] { background-image: url('/_layouts/15/images/icwmv.gif'); }
#mySearchResults A[href$='.mov'] { background-image: url('/_layouts/15/images/icwmv.gif'); }
#mySearchResults A[href$='.mp4'] { background-image: url('/_layouts/15/images/icwmv.gif'); }
#mySearchResults A[href$='.doc'] { background-image: url('/_layouts/15/images/icdoc.png'); }
#mySearchResults A[href$='.docm'] { background-image: url('/_layouts/15/images/icdocm.png'); }
#mySearchResults A[href$='.docx']{ background-image: url('/_layouts/15/images/icdocx.png'); }
#mySearchResults A[href$='.odt']{ background-image: url('/_layouts/15/images/icodt.gif'); }
#mySearchResults A[href$='.pub']{ background-image: url('/_layouts/15/images/icpub.gif'); }
#mySearchResults A[href$='.ppt']{ background-image: url('/_layouts/15/images/icppt.png'); }
#mySearchResults A[href$='.pptx']{ background-image: url('/_layouts/15/images/icpptx.png'); }
#mySearchResults A[href$='.xls']{ background-image: url('/_layouts/15/images/icxls.png'); }
#mySearchResults A[href$='.xlsb']{ background-image: url('/_layouts/15/images/icxlsb.png'); }
#mySearchResults A[href$='.xlsm']{ background-image: url('/_layouts/15/images/icxlsm.png'); }
#mySearchResults A[href$='.xlsx']{ background-image: url('/_layouts/15/images/icxlsx.png'); }
#mySearchResults A[href$='.accdb']{ background-image: url('/_layouts/15/images/icaccdb.png'); }
#mySearchResults A[href$='.htm']{ background-image: url('/_layouts/15/images/ichtm.gif'); }
#mySearchResults A[href$='.html']{ background-image: url('/_layouts/15/images/ichtm.gif'); }
#mySearchResults A[href$='.aspx']{ background-image: url('/_layouts/15/images/ichtm.gif'); }
#mySearchResults A[href$='.txt']{ background-image: url('/_layouts/15/images/ictxt.gif'); }
#mySearchResults A[href$='.csv']{ background-image: url('/_layouts/15/images/ictxt.gif'); }
#mySearchResults A:hover { color: #FF0000; transition: all 400ms; text-decoration: none; }
</style>

Answer 2

I am assuming you are using JavaScript. So you could try some regex instead of the CSS solution. Replace your code with the following:

var patPngExt = /^.*(doc|docm|docx|dot|dotx|dotm|odt|one|ppt|pptx|xls|xlsx|xlsb|xlsm|xlt|xla|xlam|xltm|ods|pub|accdb|xps|pdf)$/i;
var patGifExt = /^.*(png|bmp|gif|jpg|jpeg|tif|tiff|wmv|ini|zip|txt|css)$/i;

var ft = $getItemValue(ctx, "FileType");

var iconURL;
if ( patPngExt.test( ft ) ){
  iconURL = String.format('/_layouts/images/ic{0}.png', ft)
} else if ( patGifExt.test( ft ) ){
  iconURL = String.format('/_layouts/images/ic{0}.gif', ft)
} else {
  iconURL= "/_layouts/images/icgen.gif";
}

Now, you can add/remove extensions from the pattern lists for those in the layouts folder that may have a GIF extension or PNG extension. This process is case-insensitive, so it doesn't matter if the ft variable is in upper case, lower case or mixed case, unlike the CSS solution. If the extension does not fall within those pattern lists, the generic document icon is used.