4

I have some codesandboxes showing the default-sandbox-thumbnail and others showing the thumbnail of the codesandbox right.

See the screenshot of my sandboxes listenter image description here

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?

M -
  • 26,908
  • 11
  • 49
  • 81
Koala7
  • 1,340
  • 7
  • 41
  • 83
  • 3
    This sounds like a [customer-support question](https://meta.stackoverflow.com/questions/255745/why-cant-i-ask-customer-service-related-questions), not a development question. I believe the CodeSandbox previews are auto-generated by taking a screenshot of your app. If the screenshot fails, then you'll just get the default cube png. I don't think there's a way to change this, but you might be able to [open an issue here](https://github.com/codesandbox/codesandbox-client/issues) asking for that feature. – M - Jan 05 '22 at 20:42
  • There are some open issues but the solution is not clear 1) https://github.com/codesandbox/codesandbox-client/issues/1563 2) https://github.com/codesandbox/codesandbox-client/issues/2170 – Koala7 Jan 07 '22 at 16:24
  • I see that you added a question to the Github issue, but you should also add links to your sandboxes list so others can look at it and see the problem firsthand. That issue is already closed as well, so it might not get much attention. – M - Jan 07 '22 at 21:52

3 Answers3

3

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

enter image description here

Koala7
  • 1,340
  • 7
  • 41
  • 83
1

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!)

code
  • 5,690
  • 4
  • 17
  • 39
  • I have tried your solution but with no success, Can you please show me how to do it in one of my codesandbox of the list, like this for example https://codesandbox.io/s/circle-threejs-oxdod, so i can accept your answer – Koala7 Jan 08 '22 at 09:48
  • Sorry, it's not the last part of the link; it's the _original_ last part of the link, which in your case is `oxdod`. So visit https://codesandbox.io/api/v1/sandboxes/oxdod/screenshot.png – code Jan 08 '22 at 17:59
  • The problem is that the screenshot has never been generated for the codesandbox, this is the codesandbox with your hack => https://codesandbox.io/s/confident-cdn-rkq0c, its is not picking up. – Koala7 Jan 08 '22 at 18:06
1

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.

jsejcksn
  • 27,667
  • 4
  • 38
  • 62
  • Thanks, i have opened the issue here => https://github.com/codesandbox/codesandbox-client/discussions/6383, hopefully this can be fixed in a reasonable time, it is a very annoying bug – Koala7 Jan 08 '22 at 11:11