Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

document-library-thumbnails not all documents are previewing #795

Open
GustavoAlmeidaAboud opened this issue Apr 29, 2024 · 8 comments
Open
Labels
🐞 Bug Issue with one of the samples

Comments

@GustavoAlmeidaAboud
Copy link

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

@GustavoAlmeidaAboud GustavoAlmeidaAboud added the 🐞 Bug Issue with one of the samples label Apr 29, 2024
@tecchan1107
Copy link
Collaborator

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
Copy link
Author

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

@tecchan1107
Copy link
Collaborator

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
Copy link
Author

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
Copy link
Collaborator

tecchan1107 commented May 2, 2024

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
Copy link
Collaborator

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

Gallery.mp4

@GustavoAlmeidaAboud
Copy link
Author

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 Bug Issue with one of the samples
Projects
None yet
Development

No branches or pull requests

2 participants