pnp/List-Formatting

document-library-thumbnails not all documents are previewing

Opened this issue · 8 comments

GustavoAlmeidaAboud commented

Thank you for reporting a bug! Use the sections below to submit a bug ONLY if it's related to samples in this repo. If you have an issue or question about list formatting or its documentation, please submit it at https://aka.ms/spdev-issues

  • Bugs that do not follow the below template will automatically be closed
  • All bug reports are welcome - we want to fix them!
  • This repo is maintained by volunteers (not Microsoft). Please be courteous and patient. 🙂
  • Include sufficient details and context.
  • If you have multiple bugs please submit them separately so we can track resolution.
  • Screenshots are always helpful (just paste any images right here in the bug report)
  • We accept pull requests. If you know how to fix it - go ahead!

DELETE EVERYTHING ABOVE AFTER READING - THANKS!

Sample (which sample are you having trouble with)

document-library-thumbnails

What Should Happen

The image preview thumbnail should be for all the files

What Actually Happens

Some files are not showing the thumbnails

tecchan1107 commented

Hi @GustavoAlmeidaAboud .
Could you please tell what file extensions are not displaying thumbnails?

When I tried it in my environment, Excel, Word, PDF, etc. displayed the preview image without any problem.
image

GustavoAlmeidaAboud commented

@tecchan1107 Mainly PDF, but we have over 200+ files.

tecchan1107 commented

Thanks for the reply. On my end, the PDF was also previewed.

Do you have the following set up? (Here is an excerpt from the ViewRequirements in the README)

image

If the above settings are not made, only folders will be displayed as shown below.

image

GustavoAlmeidaAboud commented

Hi @tecchan1107 , the Allow management of contents is allowed, looks like the page doesn't render correctly with all the preview of the pds :/

tecchan1107 commented

Hmmm...

I changed the code to use ＠thumbnail to display a preview image. When you have time, I hope you will try the following code.

Sample Code 
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "class": "ms-borderColor-neutralLight",
      "href": "[$FileRef]"
    },
    "style": {
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "flex-direction": "column",
          "align-items": "stretch",
          "padding": "1px",
          "margin": "10px",
          "max-width": "930px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=if(startsWith([$ContentTypeId],'0x0120'),'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/archive.png',@thumbnail.medium)"
            },
            "style": {
              "width": "auto",
              "height": "300px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$FileName]",
                "style": {
                  "margin-bottom": "1px"
                },
                "attributes": {
                  "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}
tecchan1107 commented

When using the gallery view, are preview images displayed? If possible, I would like you to check this as well.

Gallery.mp4
GustavoAlmeidaAboud commented

Hello @tecchan1107 ,

Thank you very much for helping with this matter.

I can view all the previews in the gallery view without any trouble.

Regarding the page, there seems to be an intermittent pagination issue. Initially, I can see all the previews smoothly with the "Library-Thumbnails" json formatted view. However, as I scroll down the page, the flickering starts, and only a portion of the previews are displayed.

tecchan1107 commented

Thank you for checking and for your reply!
I will increase the number of data and give it a try.

  • 👍1