Most sheets have images linked with them. You might have a logo for the game, a sheet background, maybe different icons for your dice, and so on.
Those images are not part of the sheet and must be stored separately. That means they must be hosted somewhere online. You might be tempted to use a dedicated image hosting service like Imgur or Imgpp, or a personal cloud service like Dropbox. These are all bad ideas.
Image hosting services sometimes delete old pictures, and if that happens the images in your sheets won’t display anymore, possibly breaking the sheets.
Another thing that happens is people maintaining a sheet move on and abandon the sheet. This is perfectly fine – the Roll20 repo is set up so that anyone can come in and take over the maintenance of a sheet if it’s needed. But if you have images hosted in your personal cloud, and move on from the sheet, it’s very easy for you to forget to keep those images where they are. You might reorganise your files and break those links, breaking the sheets that depend on them.
What Should You Do?
The absolute best thing you can do is to store your images in the Github repo. You are already storing your HTML and CSS files there, so it makes sense to keep all files the sheet needs together. But this is a little clunky.
First, the files don’t exist in GitHub until you put them there- which means you can’t test them while building the sheet. In that case, it’s best to handle the sheet in two versions:
- While working on the sheet, store the images anywhere, including those places I mentioned above, or in your own personal GitHub.
- Then add those files to your sheet’s folder, so when you make your commit, they are uploaded to the Roll20 repo.
- Now, once the sheet is accepted, the files exist in the repo, so you can update your sheet – changing your image links to point to files in the roll20 repo.
- After that second commit, your images are safe and you can forget about them.
Github Image Addresses
The second complication is that the file addresses are not simple. You have to use a link like this:
https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/FOLDER/FILENAMECode language: JavaScript (javascript)Use that link for your files, replacing FOLDER with your game folder, and FILE with the image folder.
If you’re feeling brave, you can do this on your first sheet commit, but there’s no way to test it until the sheet has been accepted, so it’s best to follow the clunky procedure I described earlier.
Replacing Sheet Images
Let’s you have created several images and properly linked them, including a logo. At some later time, you decide to swap the logo for a better one. You might be tempted to simply create a new logo image file with the same name and drop it into your GitHub folder. This should be all that’s needed.
But apparently, there’s a bug where images aren’t always updated. It’s better to create an image with a different file name and update the references to that file in the character sheet.
