Create a Block Thumbnail

In this article, we’ll cover how to create a thumbnail for your block that will appear in the sidebar, making it easier for your users to visually identify your block.

  1. Take a screenshot of your block, then use a photo editing software to make sure that your photo is 300 pixels in width—this will help reduce loading times for the sidebar. Name your image “thumbnail” and save it in PNG format in the root level of your block. 
  2. We recommend saving an additional version for your preview and your README. Make sure this version is no more than 800 pixels wide (it won't appear any larger than that), name it “preview,” and save it in JPEG format. 
  3. Reduce the file size of both images using a program such as imageOptim.
  4. Return to your terminal—you will now notice a message that says “No image at thumbnail.png.” Run `npm run build` to compile everything again and ensure that all tests are passing. 
  5. Run `element update`—the missing thumbnail message should now be gone. 
  6. Open and refresh Site Designer to confirm that the thumbnail has been added.