Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

163
Views
Codesandbox thumbnail configuration

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?

11 months ago · Santiago Trujillo
3 answers
Answer question

0

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

11 months ago · Santiago Trujillo Report

0

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.

11 months ago · Santiago Trujillo Report

0

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

11 months ago · Santiago Trujillo Report
Answer question
Find remote jobs