I have some codesandboxes showing the default-sandbox-thumbnail and others showing the thumbnail of the codesandbox right.
See the screenshot of my sandboxes list
It is not clear to me from what is depending
I have looked at the documentation to understand if i have to configure the sandbox.config.json
but i have not found anything useful
How can i configure the thumbnail of my codesandboxes?
There's no built-in way to create a custom thumbnail, but I've found a workaround.
It's possible to change (update) the thumbnail by visiting https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png, where SANDBOX_ID
is the ID of your code sandbox (you can find this by visiting the sandbox you want to customize, then get the last part of the link, e.g. https://codesandbox.io/s/`h8pG8`); codesandbox will visit your sandbox page and take a new sceenshot of your app and update your sandbox.
Here's the hacky part:
Just upload whatever image you want as the thumbnail to your sandbox, then in your homepage just temporarily display that image! You could just do something like:
<img src="/path/to/my/thumbnail" style="position: fixed; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; z-index: 100;" />
Then visit the endpoint (https://codesandbox.io/api/v1/sandboxes/SANDBOX_ID/screenshot.png); check your dashboard to see if the thumbnail changed.
(make sure to delete the image later!)
Hi: I'm the one who created the GitHub issue codesandbox/codesandbox-client#2170 that you discovered and mentioned, which addresses this exact topic.
The "screenshot microservice" mentioned in the thread by CodeSandbox employees appears to not be working any longer (or at least not right now). If it did work, you could use a URL in this format to update the screenshot for one of your sandboxes:
https://codesandbox.io/api/v1/sandboxes/sandboxId/screenshot.png
According to your comment here, this is the URL you'd use to update the specific sandbox you mentioned:
https://codesandbox.io/api/v1/sandboxes/oxdod/screenshot.png
Because that officially-suggested method isn't working, your most direct route to an answer is to contact customer support using one of the options at the bottom of the CodeSandbox Frequently Asked Questions page. I suggest both sending an email AND opening a new public issue in the repo.
This is an existing bug for codesandbox, however i have found a temporary solution for the preview not showing. Take a screenshot of your code/project, rename it thumbnail.png and upload in the in the files