Jan 21, 2024 6:18 pm
Trick to allow a custom charsheet image to be changed without editing code
On the discord, @ThatTaoGuy asked if there was a feature to do this. It is something I've wondered before and I think it would be particularly useful for sheets with complicated code where it is hard to find the right spot to edit, especially if the intended user isn't necessarily very familiar with the advanced custom bbcode and css tricks that are often used.
As far as I know there isn't a feature but I thought there might be a trick that would make it work and I think I've figured something out.
Disclaimer:
Regarding these type of tricks, I am but a simple 3rd level adventurer who has stumbled upon a powerful wizard's spellbook and I'm trying to use the knowledge I've found without the appropriate training. I'm not 100% sure how the code works or if there could be unintended consequences, so users beware! Having said that, it seems to be working well on my computer and mobile. Let me know if you find a bug, although I'm not sure I'll know how to fix it.
Let me start with an example to illustrate the feature using the Best Friends charsheet that ThatTaoGuy made (HERE):
I added a field for the image url and an update button:
If you edit the image url and then click the button it changes the image for you:
I also changed a few other bits of the code so that the sheet can be viewed better in dark mode.
Here's the code (note: the image doesn't show up in the "Create Character" spoiler, but it does in the sheet itself):
I am... Name
And I... am like this
I hate friend because she is prettier than me.
I hate friend because she is cooler than me.
I hate friend because she is smarter than me.
I hate friend because she is tougher than me.
I hate friend because she is richer than me.
Image URL:
https://th.bing.com/th/id/OIG.b9YiP3jayo1PqR6_EPwY
Update Image
Note: To change image, edit URL and then click button![]()
Explanation so you can adapt it to other sheets
1) You need a fillable field:
[_=URL]
The URL is for the initial image you want.
I think you can place this anywhere, but it is NECESSARY to note the order of this fillable field/formula within the context of the character sheet for later. In the Best Friends example, it is the 8th fillable field/formula in the sheet.
2) You need the button:
[url=#" class="fancyButton" style="margin-right:1em;" onclick="javascript:{window.updateImage();return false;}]Update Image[/url]
I named it "Update Image" but you can change the name if you want.
3) You need the image insertion location and function that does the update:
[f=display:flex flex-direction:column width:100%][img]" id="blankimg1[/img][/f]
[img]https://gamersplane.com/images/spacer.gif" onload="javascript:{window.updateImage = function(){$('.customChar #charimg1').remove();$(document.createElement('img')).attr('id','charimg1').attr('style','width:100%; height:auto;').attr('src',$('.customChar .formVal:eq(7)').text()).insertAfter($('.customChar #blankimg1'));}; if (window.jQuery){updateImage();}else{window.onload=window.updateImage;}}[/img]
Put this chunk of code where you want the image to show up. You can change the size of the image by adjusting the width and you MUST adjust the formVal:eq number to be the order of the fillable field URL minus 1. So in the Best Friends example, it was the 8th fillable field/formula, so the number is 7.
On the discord, @ThatTaoGuy asked if there was a feature to do this. It is something I've wondered before and I think it would be particularly useful for sheets with complicated code where it is hard to find the right spot to edit, especially if the intended user isn't necessarily very familiar with the advanced custom bbcode and css tricks that are often used.
As far as I know there isn't a feature but I thought there might be a trick that would make it work and I think I've figured something out.
Disclaimer:
Regarding these type of tricks, I am but a simple 3rd level adventurer who has stumbled upon a powerful wizard's spellbook and I'm trying to use the knowledge I've found without the appropriate training. I'm not 100% sure how the code works or if there could be unintended consequences, so users beware! Having said that, it seems to be working well on my computer and mobile. Let me know if you find a bug, although I'm not sure I'll know how to fix it.
Let me start with an example to illustrate the feature using the Best Friends charsheet that ThatTaoGuy made (HERE):
I added a field for the image url and an update button:
If you edit the image url and then click the button it changes the image for you:
I also changed a few other bits of the code so that the sheet can be viewed better in dark mode.
Here's the code (note: the image doesn't show up in the "Create Character" spoiler, but it does in the sheet itself):
[ +- ] Best Friends v2
Create character
I am... Name
And I... am like this
I hate friend because she is prettier than me.
I hate friend because she is cooler than me.
I hate friend because she is smarter than me.
I hate friend because she is tougher than me.
I hate friend because she is richer than me.
Image URL:
https://th.bing.com/th/id/OIG.b9YiP3jayo1PqR6_EPwY
Update Image
Note: To change image, edit URL and then click button
| Pretty | Cool | Smart | Tough | Rich |
| 0 | 0 | 0 | 0 | 0 |
Stuff: things I have
Nonsense: drama I bring
Explanation so you can adapt it to other sheets
1) You need a fillable field:
[_=URL]
The URL is for the initial image you want.
I think you can place this anywhere, but it is NECESSARY to note the order of this fillable field/formula within the context of the character sheet for later. In the Best Friends example, it is the 8th fillable field/formula in the sheet.
2) You need the button:
[url=#" class="fancyButton" style="margin-right:1em;" onclick="javascript:{window.updateImage();return false;}]Update Image[/url]
I named it "Update Image" but you can change the name if you want.
3) You need the image insertion location and function that does the update:
[f=display:flex flex-direction:column width:100%][img]" id="blankimg1[/img][/f]
[img]https://gamersplane.com/images/spacer.gif" onload="javascript:{window.updateImage = function(){$('.customChar #charimg1').remove();$(document.createElement('img')).attr('id','charimg1').attr('style','width:100%; height:auto;').attr('src',$('.customChar .formVal:eq(7)').text()).insertAfter($('.customChar #blankimg1'));}; if (window.jQuery){updateImage();}else{window.onload=window.updateImage;}}[/img]
Put this chunk of code where you want the image to show up. You can change the size of the image by adjusting the width and you MUST adjust the formVal:eq number to be the order of the fillable field URL minus 1. So in the Best Friends example, it was the 8th fillable field/formula, so the number is 7.