Forum Discussion
in a result list, how to make PNG pictures displayed when I click on the name?
Hi The title is maybe not super clear... so let me rephrase it! I've a result list in a page on Sharepoint Online. To do it, i'm using the "Search Results" Web Part and i display the results usi...
Pascal_T180 Are the web parts from PnP?
https://microsoft-search.github.io/pnp-modern-search/
There is a possibility that the web part needs to be configured by code, on handling these files. However it also sounds quite unlikely. I can look further into this, but meanwhile, please answer where the source of the search result web part is (PnP, custom git repository etc).
Hi and thanks. The source for the search results is the one proposed by default in SPO.
So I guess is that it's not the issue...
Thanks
<content id="template"> <style> /* Insert your CSS overrides here */ .example-themePrimary a { color: {{@root.themeVariant.palette.themePrimary}}; } </style> <div class="template_root"> {{#if @root.hasPrimaryOrSecondaryResults}} {{#if showResultsCount}} <div class="template_resultCount"> <label class="ms-fontWeight-semibold">{{getCountMessage totalRows keywords}}</label> </div> {{/if}} {{#if promotedResults}} <ul class="template_defaultList template_promotedResults"> <li class="ms-fontWeight-semibold title">{{strings.PromotedResultsLabel}}</li> {{#each promotedResults as |promotedResult|}} <li> <div> <i class="ms-Icon ms-Icon--MiniLink" aria-hidden="true"></i> </div> <div> <a class="ms-font-l" href="{{Url}}">{{Title}}</a> <div class="ms-font-s">{{Description}}</div> </div> </li> {{/each}} </ul> {{/if}} <ul class="template_defaultList"> {{#each items as |item|}} <li class="template_listItem" tabindex="0"> {{#> resultTypes item=item}} {{!-- The block below will be used as default item template if no result types matched --}} <div class="template_result"> <pnp-fabric-icon file-extension='{{IconExt}}' image-url='{{SiteLogo}}'></pnp-fabric-icon> <div class="template_contentContainer"> <span class="template_title example-themePrimary"><a href="{{getUrl item}}">{{Title}}</a></span> <span> {{getSummary HitHighlightedSummary}} <span class="template_author"> {{#with (split AuthorOWSUSER '|')}} {{[1]}} {{/with}} </span> </span> <span>{{getDate Created "LL"}}</span> <div class="template_tags example-themePrimary"> {{#if owstaxidmetadataalltagsinfo}} <i class="ms-Icon ms-Icon--Tag" aria-hidden="true"></i> {{#each (split owstaxidmetadataalltagsinfo ",") as |tag| }} <a href="#owstaxidmetadataalltagsinfo:'{{trim tag}}'">{{tag}} </a> {{/each}} {{/if}} </div> </div> <div class="template_previewContainer ms-hiddenSm"> {{#eq item.contentclass 'STS_ListItem_DocumentLibrary'}} {{#if (getPreviewSrc item)}} <div class="doc-container"> <div class="img-container"> {{#eq FileType 'pdf'}} <!-- Documents from OneDrive sites can't be viewed directly due to SAMEORIGIN iframe restrictions--> {{#contains Path '-my.sharepoint'}} <img class="document-preview-item img-preview" width="120" src="{{ServerRedirectedPreviewURL}}" data-src="{{ServerRedirectedPreviewURL}}" data-url="{{ServerRedirectedEmbedURL}}" /> {{else}} <img class="document-preview-item img-preview" width="120" src="{{ServerRedirectedPreviewURL}}" data-src="{{ServerRedirectedPreviewURL}}" data-url="{{Path}}" /> {{/contains}} {{else}} <img class="document-preview-item img-preview" width="120" src="{{getPreviewSrc item}}" data-src="{{getPreviewSrc item}}" data-url="{{#if ServerRedirectedEmbedURL}}{{ServerRedirectedEmbedURL}}{{else}}{{getPreviewSrc item}}{{/if}}" /> {{/eq}} <div class="hover"> <div><i class="ms-Icon ms-Icon--Preview" aria-hidden="true"></i></div> </div> </div> </div> {{/if}} {{/eq}} </div> </div> {{/resultTypes}} </li> {{/each}} </ul> {{else}} {{#unless showBlank}} <div class="template_noResults">{{@root.strings.NoResultMessage}}</div> {{/unless }} {{/if}} </div> </content> <content id="placeholder"> <style> /* Insert your CSS overrides here */ </style> <div class="placeholder_root"> {{#if showResultsCount}} <div class="template_resultCount"> <span class="shimmer line" style="width: 20%"></span> </div> {{/if}} <ul class="template_defaultList"> {{#times maxResultsCount}} <li class="template_listItem" tabindex="0"> <div class="template_result"> <div class="template_icon shimmer"></div> <div class="template_contentContainer"> <span class="shimmer line" style="width: 60%"></span> <span class="shimmer line" style="width: 100%"></span> <span class="shimmer line" style="width: 100%"></span> <span class="shimmer line" style="width: 35%"></span> <span class="shimmer line" style="width: 20%"></span> </div> <div class="template_previewContainer ms-hiddenSm"> <div class="doc-container"> <div class="img-container"> <div class="shimmer img-preview" style="width: 120px;height: 70px;"></div> </div> </div> </div> </div> </li> {{/times}} </ul> </div> </content>