Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Images inside a roll-template via a macro or character sheet button not working

1703892927
Daniel S.
Pro
Marketplace Creator
Sheet Author
I've been able to get an image to show up in a rolltemplate just fine. It looks something like this. This is the button code: &lt;span class="skillrollbutton"&gt; &lt;button class="sheet-d6-dice" type="roll" value= '&amp;{template:dodasadventureskills} {{skillname=Knowledge}} {{subtags=@{character_name}}} {{adventureskillmodifier=@{knowledgeskilltotal}}} {{adventurerolltotal=[[2d6 + @{knowledgeskilltotal}]]}}' name="roll_skilltotalcolumn"&gt;&lt;/button&gt; &lt;/span&gt; Followed by the Rolltemplate code: &lt;rolltemplate class="sheet-rolltemplate-dodasadventureskills"&gt; &lt;div class="container"&gt; &lt;div class="skilltemplateheaderrow"&gt; &lt;div class="skilltemplateheader"&gt; &lt;span class="templateskillname"&gt;{{skillname}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true"&gt;&lt;/span</a>&gt; &lt;span class="templateskillcharactername"&gt;{{subtags}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 3 column grid thing --&gt; &lt;div class="skilltemplatebottomrow"&gt; &lt;div class="skilltemplaterollplus"&gt; &lt;span class="skilltemplaterollplusname"&gt;Roll + {{adventureskillmodifier}} =&lt;/span&gt; &lt;/div&gt; &lt;div class="skilltemplatediceroll"&gt; &lt;span class="bignumber"&gt;{{adventurerolltotal}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 2 columns --&gt; &lt;/div&gt;&lt;!-- rolltemplate --&gt; &lt;/rolltemplate&gt;&lt;!-- actual rolltemplate --&gt; I'm trying to have about 8-10 different images used (depending on the skill or skill group), without making a separate rolltemplate for each one.&nbsp; I've tried a number of permutations of putting the img link inside the button macro up top instead, or using it in a Macro in Roll20, but regardless, I can only get the dang img to show up if I include it inside the Rolltemplate. Here's one example I tried that results in the img just not showing up. Like, it doesn't even show in the code when inspecting via developer tools. &lt;span class="skillrollbutton"&gt; &lt;button class="sheet-d6-dice" type="roll" value= '&amp;{template:dodasadventureskills} [Mobility] (<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true</a>) {{skillname=@{skillsandabilities}}} {{subtags=@{character_name}}} {{adventureskillmodifier=@{skilltotal}}} {{adventurerolltotal=[[2d6 + @{skilltotal}]]}}' name="roll_skilltotalcolumn"&gt;&lt;/button&gt; &lt;/span&gt; I looked at a dozen or so forum posts and documentation pages, but can't figure out the issue. Any advice is greatly appreciated. I suppose if I have to I can make separate code for each rolltemplate, but that's a TON of unnecessary html and CSS imo. Thanks!
1703893370
GiGs
Pro
Sheet Author
API Scripter
I dont have time to read your full post (quickly heading ouut) but to avoid making multiple rolltemplates, you can use this code: {{#key}} image {{/key}} If you put # before a key, than that part of the code will show up only if the key exists in the rolltemplate (its value dioesn't matter-&nbsp; just whether it is there or not). So can have things display conditionally and have essentially the samee rolltemplate serve different purposes.
1703893573

Edited 1703894034
Daniel S.
Pro
Marketplace Creator
Sheet Author
Hmm. Maybe that's a solution for now, I'll give it a try. I'm looking around, wonder if there's any documentation you'd suggest for an example of using a #key thing like you mentioned? I'm bouncing around here, maybe that's the best spot? <a href="https://cybersphere.me/keys-and-values/" rel="nofollow">https://cybersphere.me/keys-and-values/</a>
1703895378
Daniel S.
Pro
Marketplace Creator
Sheet Author
I managed to get some progress with that, but ran into another, possibly related problem. I'm using position: absolute to try to get the img where it is. Not sure if there's a better way? It works fine for the first Rolltemplate used in a chain, but the subsequent ones get offset. Here's some relevant code: &nbsp; &lt;div class="skilltemplateheader"&gt; &nbsp; &nbsp; &nbsp; {{#knowledgeskill}} &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="templateskillname"&gt;{{knowledgeskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true"&gt;&lt;/span</a>&gt; &nbsp; &nbsp; &nbsp; {{/knowledgeskill}} &nbsp; &nbsp; &nbsp; {{#mobilityskill}} &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="templateskillname"&gt;{{mobilityskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true"&gt;&lt;/span</a>&gt; &nbsp; &nbsp; &nbsp; {{/mobilityskill}} &nbsp; &nbsp; &nbsp; &nbsp; &lt;span class="templateskillcharactername"&gt;{{subtags}}&lt;/span&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; That works fine when I use the appropriate mobilityskill or knowledgeskill field up top: &lt;button class="sheet-d6-dice" type="roll" value= '&amp;{template:dodasadventureskills} {{mobilityskill=Mobility}} {{subtags=@{character_name}}} {{adventureskillmodifier=@{mobilityskilltotal}}} {{adventurerolltotal=[[2d6 + @{mobilityskilltotal}]]}}' name="roll_skilltotalcolumn"&gt;&lt;/button&gt; &lt;/span&gt; But getting this funkyness. Not sure if it's related or not. But previously, each new roll lined up normally even when using position: absolute.
1703907124
GiGs
Pro
Sheet Author
API Scripter
I don't use the position: command very often, probably from my old days of avoiding CSS as much as possible. But you'll need to post the CSS for that rolltemplate as well as it hTML to understand exactly what's going on.
1703923263

Edited 1703923333
Daniel S.
Pro
Marketplace Creator
Sheet Author
Html for the roll template: &lt;!-- skill roll template(s) --&gt; &lt;rolltemplate class="sheet-rolltemplate-dodasadventureskills"&gt; &lt;div class="container"&gt; &lt;div class="skilltemplateheaderrow"&gt; &lt;div class="skilltemplateheader"&gt; {{#knowledgeskill}} &lt;span class="templateskillname"&gt;{{knowledgeskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true"&gt;&lt;/span</a>&gt; {{/knowledgeskill}} {{#mobilityskill}} &lt;span class="templateskillname"&gt;{{mobilityskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true"&gt;&lt;/span</a>&gt; {{/mobilityskill}} &lt;span class="templateskillcharactername"&gt;{{subtags}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 3 column grid thing --&gt; &lt;div class="skilltemplatebottomrow"&gt; &lt;div class="skilltemplaterollplus"&gt; &lt;span class="skilltemplaterollplusname"&gt;Roll + {{adventureskillmodifier}} =&lt;/span&gt; &lt;/div&gt; &lt;div class="skilltemplatediceroll"&gt; &lt;span class="bignumber"&gt;{{adventurerolltotal}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 2 columns --&gt; &lt;/div&gt;&lt;!-- rolltemplate --&gt; &lt;/rolltemplate&gt;&lt;!-- actual rolltemplate --&gt; Css: /* SKILL ROLL TEMPLATE */ .sheet-rolltemplate-dodasadventureskills .sheet-container { width: 173pt; background-color: #9c9696; border: 0px solid #403635; outline: 3px solid #9a9489; outline-offset: 1px; -webkit-box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); box-shadow: 2px 2px 11px 3px rgba(53, 39, 25, 0.45); font-family: Verdena; margin-bottom: 7px; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplateheaderrow { display: grid; grid-template-columns: 1fr; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplatebottomrow { display: grid; grid-template-columns: 74pt 57pt; margin-left: 42pt; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplateheader { display: grid; text-align: center; grid-column-start: 1; border: 1px solid gray; background-color: #3f3b3b; color: #ebebeb; -webkit-clip-path: polygon(calc(100% - 10px) 0, 100% 10px, 100% 100%, 13px 100%, 0 calc(100% - 10px), 0 0); } .sheet-rolltemplate-dodasadventureskills .sheet-templateskillname { font-family: Times New Roman, Verdena; font-size: 15pt; padding-top: 3px; margin-left: 3pt; } .sheet-rolltemplate-dodasadventureskills .sheet-templateskillcharactername { font-family: Times New Roman, Georgia; font-size: 10pt; font-style: italic; padding-bottom: 2px; padding-top: 0px; color: #e0e0e0; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplaterollplus { display: grid; text-align: center; padding-left: 12px; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplaterollplusname { justify-content: center; padding-top: 10px; font-size: 12pt; color: black; font-weight: bold; background-color: #C5C3B6; margin-left: -40px; padding-left: 34px; } .sheet-rolltemplate-dodasadventureskills .textchatcontainer .inlinerollresult { background-color: none; border: none; padding: none; font-size: 1em; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplatediceroll { display: grid; text-align: center; border: 1px solid gray; font-size: 20pt; font-weight: 900; padding-top: 0pt; padding-bottom: 9pt; background-color: black; } .sheet-rolltemplate-dodasadventureskills span.sheet-bignumber { height: 8pt; padding-top: 4px; padding-bottom: 4px; } .sheet-rolltemplate-dodasadventureskills .sheet-skilltemplatediceroll span.inlinerollresult { background-color: black; display: block; padding-top: 4px; padding-bottom: 2px; width: 36px; height: 18px; margin-left: 13pt; border: none; color: white; } .sheet-rolltemplate-dodasadventureskills img { position: absolute; height: 18px; width: 18px; top: 29px; left: 50px; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasadventureskills .inlinerollresult.fullfail { border: 0px solid #901616a8; background-color: #652e0e; } .sheet-rolltemplate-darkmode.sheet-rolltemplate-dodasadventureskills .inlinerollresult.fullcrit { border: 0px solid #901616a8; background-color: #2e5545; } .sheet-rollemplate-dodasadventureskills .sheet-skilltemplatediceroll .inlinerollresult.fullfail { border: 0px solid #901616a8; background-color: #652e0e; } .sheet-rollemplate-dodasadventureskills .sheet-skilltemplatediceroll .inlinerollresult.fullcrit { border: 0px solid #901616a8; background-color: #2e5545; }
1703923914
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
to get the image to show, you need to end the button url with a filetype. so this: [Mobility] (<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true</a>) should be: [Mobility](<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true#.png" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true#.png</a>) note that there is no space between the ] and (.
1703976353

Edited 1703976456
Daniel S.
Pro
Marketplace Creator
Sheet Author
That was one of the things I tried, but I couldn't get it to work. I shall try again and see if I was messing something up. However, today I jumped on to check on things and now none of the icons in my sheet are loading inside Chrome. They're working fine in Firefox. Compared on Mac and PC, on different versions of Chrome (including the up to date one) and on different versions of the sheet but it persists. Perhaps there was a bug yesterday that has gotten worse today. I'll report it to the bug forums just in case.
1703979119

Edited 1703984299
GiGs
Pro
Sheet Author
API Scripter
It looks like a bug from a few weeks ago has returned - lots of sheets are having trouble with image loading. I wouldnt try to find a solution until there is an announcement that the issue is fixed.
1703981356

Edited 1703998624
Daniel S.
Pro
Marketplace Creator
Sheet Author
Edit: it looks like this issue of no images on the sheet was resolved. Some other folks made a post about it on their sheets as well. Images are working fine now.&nbsp;
1706145891

Edited 1706151238
Daniel S.
Pro
Marketplace Creator
Sheet Author
Just bringing this back up. Was travelling and away from this for a few weeks. The bug was resolved, but when I said "images are working fine now" I just meant in the general sense that they're loading on the sheet. However, I'm still having the issue mentioned above (where the second and subsequent roll template instances in chat displaces the image downward for some reason). Edit: I got it to work via the method Scott mentioned as well, by including the img chunk of code inside the {{ }} for the title section of the rolltemplate. However, the same thing happens where the second entry gets displaced. Macro: &amp;{template:dodasadventureskills}{{knowledgeskill=Image Test [knowledge](<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/axe-in-stump.png?raw=true.png" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/axe-in-stump.png?raw=true.png</a>)}} {{subtags=Something}} {{adventureskillmodifier=2}} {{adventurerolltotal=[[2d6 + 2]]}} Rolltemplate: &lt;rolltemplate class="sheet-rolltemplate-dodasadventureskills"&gt; &lt;div class="container"&gt; &lt;div class="skilltemplateheaderrow"&gt; &lt;div class="skilltemplateheader"&gt; &lt;span class="templateskillname"&gt;{{knowledgeskill}}&lt;/span&gt; &lt;span class="templateskillcharactername"&gt;{{subtags}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 3 column grid thing --&gt; &lt;div class="skilltemplatebottomrow"&gt; &lt;div class="skilltemplaterollplus"&gt; &lt;span class="skilltemplaterollplusname"&gt;Roll + {{adventureskillmodifier}} =&lt;/span&gt; &lt;/div&gt; &lt;div class="skilltemplatediceroll"&gt; &lt;span class="bignumber"&gt;{{adventurerolltotal}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 2 columns --&gt; &lt;/div&gt;&lt;!-- rolltemplate --&gt; &lt;/rolltemplate&gt;&lt;!-- actual rolltemplate --&gt;
1706151429

Edited 1706151658
Daniel S.
Pro
Marketplace Creator
Sheet Author
It seems like it's related to using position: absolute in the css. If I change it to position: relative, it lines up right. But then it messes up the rest of the template formatting. Any tips on how to get it to be consistent with absolute, or if using relative, what might be getting messed with by using relative? I'm pretty new to this sort of thing when it comes to CSS. Also, if I use position: relative, than the img changes where it is relative to the span it's next to, meaning it won't line up right every time.
1706158049
vÍnce
Pro
Sheet Author
It's hard for me to actually tell what this issue is from the screen shots.&nbsp; I assume there is a problem with the thumbnail in upper-left corner? When using position: relative ; you might have to use a negative margin to compensate layout issues. ie margin-right: 54px;
1706161758

Edited 1706163196
Daniel S.
Pro
Marketplace Creator
Sheet Author
Yes, it's the image in the upper left not showing up in a consistent location. I've definitely tried the negative thing, unfortunately for me it's a bigger issue than that. Whereas if I use position relative, the image is a certain amount of pixels left from the name of the skill. If it's a short name, the img is closer to the middle. If it's a long name, the image gets shoves off to the left and "off-screen".
1706165420

Edited 1706165901
vÍnce
Pro
Sheet Author
This seems to work for me, but I'm not sure where you want your image exactly? I just made a little mockup.&nbsp; I removed the image in the macro since you have the images embedded in your roll template.&nbsp; Otherwise it will try and load both images which could have been messing with your layout... example; css (removed top: since it was going off the roll template) .sheet-rolltemplate-dodasadventureskills img { position: absolute; height: 18px; width: 18px; left: 50px; } or CSS using position: relative; with negative margin. (untested) seems to work as well. .sheet-rolltemplate-dodasadventureskills img { position: relative; height: 18px; width: 18px; float: left; margin-right: -18px; } html &lt;span class="skillrollbutton"&gt; &lt;button class="sheet-d6-dice" type="roll" value='&amp;{template:dodasadventureskills}{{knowledgeskill=Image Test}} {{subtags=knowledgeskill}} {{adventureskillmodifier=2}} {{adventurerolltotal=[[2d6 + 2]]}}' name="roll_skilltotalcolumn"&gt;knowledgeskill&lt;/button&gt; &lt;button class="sheet-d6-dice" type="roll" value='&amp;{template:dodasadventureskills}{{mobilityskill=Image Test}} {{subtags=mobilityskill}} {{adventureskillmodifier=2}} {{adventurerolltotal=[[2d6 + 2]]}}' name="roll_skilltotalcolumn"&gt;mobilityskill&lt;/button&gt; &lt;/span&gt; &lt;!-- skill roll template(s) --&gt; &lt;rolltemplate class="sheet-rolltemplate-dodasadventureskills"&gt; &lt;div class="container"&gt; &lt;div class="skilltemplateheaderrow"&gt; &lt;div class="skilltemplateheader"&gt; {{#knowledgeskill}} &lt;span class="templateskillname"&gt;{{knowledgeskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/bookmarklet.png?raw=true"&gt;&lt;/span</a>&gt; {{/knowledgeskill}} {{#mobilityskill}} &lt;span class="templateskillname"&gt;{{mobilityskill}}&lt;img class="REFImg" src="<a href="https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true&quot;&gt;&lt;/span" rel="nofollow">https://github.com/danimagaming/ForgeofSteelRoll20beta/blob/main/run.png?raw=true"&gt;&lt;/span</a>&gt; {{/mobilityskill}} &lt;span class="templateskillcharactername"&gt;{{subtags}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 3 column grid thing --&gt; &lt;div class="skilltemplatebottomrow"&gt; &lt;div class="skilltemplaterollplus"&gt; &lt;span class="skilltemplaterollplusname"&gt;Roll + {{adventureskillmodifier}} =&lt;/span&gt; &lt;/div&gt; &lt;div class="skilltemplatediceroll"&gt; &lt;span class="bignumber"&gt;{{adventurerolltotal}}&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- close 2 columns --&gt; &lt;/div&gt;&lt;!-- rolltemplate --&gt; &lt;/rolltemplate&gt;&lt;!-- actual rolltemplate --&gt;
1706172261
Daniel S.
Pro
Marketplace Creator
Sheet Author
Hmm. I'll give things a try based on your mockup. See if I missed something. Thanks!
1706289787

Edited 1706289801
Daniel S.
Pro
Marketplace Creator
Sheet Author
It looks like just removing the top: declaration from the img css styling fixed it. Perhaps using position absolute was anchoring it to the text chat, and when I told it to be from the top, it was a bigger gap when a new chat entry was put in. But that works for now!