in a result list, how to make PNG pictures displayed when I click on the name?

%3CLINGO-SUB%20id%3D%22lingo-sub-1707241%22%20slang%3D%22en-US%22%3Ein%20a%20result%20list%2C%20how%20to%20make%20PNG%20pictures%20displayed%20when%20I%20click%20on%20the%20name%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1707241%22%20slang%3D%22en-US%22%3E%3CP%3EHi%3C%2FP%3E%3CP%3EThe%20title%20is%20maybe%20not%20super%20clear...%20so%20let%20me%20rephrase%20it!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20a%20result%20list%20in%20a%20page%20on%20Sharepoint%20Online.%20To%20do%20it%2C%20i'm%20using%20the%20%22Search%20Results%22%20Web%20Part%20and%20i%20display%20the%20results%20using%20the%20details%20list%20layout.%3C%2FP%3E%3CP%3EIn%20this%20list%2C%20I've%20many%20results%2C%20including%20Word%2C%20PPT%2C%20PDF%2C%20and%20more%20files.%20Of%20course%2C%20when%20i%20click%20on%20a%20PDF%3B%20the%20pdf%20opens%2C%20same%20goes%20for%20PPTx%2C%20XLSx%2C%20etc...%20but%20when%20I%20click%20on%20a%20PNG%20file%2C%20i%20land%20on%20page%20giving%20me%20some%20info%20about%20the%20document%20but%20i%20dont%20have%20access%20to%20the%20PNG%20neither%20it's%20displayed.%3C%2FP%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Screenshot%202020-09-24%20112759.png%22%20style%3D%22width%3A%20539px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F221742i3972035F8D108F18%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22Screenshot%202020-09-24%20112759.png%22%20alt%3D%22Screenshot%202020-09-24%20112759.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20guess%2C%20it's%20a%20matter%20of%20configuring%20SP%20Online%20to%20do%20an%20action%20if%20it's%20a%20*.png%20type%20of%20file%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20help.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EP%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1707241%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDocument%20Library%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EUsage%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1719516%22%20slang%3D%22en-US%22%3ERe%3A%20in%20a%20result%20list%2C%20how%20to%20make%20PNG%20pictures%20displayed%20when%20I%20click%20on%20the%20name%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1719516%22%20slang%3D%22en-US%22%3E%3CP%3EUp%20%5E%5E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1719538%22%20slang%3D%22en-US%22%3ERe%3A%20in%20a%20result%20list%2C%20how%20to%20make%20PNG%20pictures%20displayed%20when%20I%20click%20on%20the%20name%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1719538%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F807075%22%20target%3D%22_blank%22%3E%40Pascal_T180%3C%2FA%3E%26nbsp%3BIs%20it%20possible%20to%20get%20a%20screenshot%20of%20your%20page%3F%20Are%20you%20using%20classic%20or%20modern%20site%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

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 using the details list layout.

In this list, I've many results, including Word, PPT, PDF, and more files. Of course, when i click on a PDF; the pdf opens, same goes for PPTx, XLSx, etc... but when I click on a PNG file, i land on page giving me some info about the document but i dont have access to the PNG neither it's displayed.

 

Screenshot 2020-09-24 112759.png

 

I guess, it's a matter of configuring SP Online to do an action if it's a *.png type of file?

 

Thanks for your help.

 

P

6 Replies
Highlighted
Highlighted

@Pascal_T180 Is it possible to get a screenshot of your page? Are you using classic or modern site?

Highlighted

@ArefHalmstrand 

Hi, yes of course, here it is. 

I'm suing I guess the new / modern site.

Screenshot 2020-09-28 125011.png

Highlighted

@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).

Highlighted

@ArefHalmstrand 

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

 

Highlighted

 

<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}}&nbsp;</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>

@Pascal_T180