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

Need help with a Chat Menu using images

1679666299
G.M. Joe
Pro
Sheet Author
I use a chat menu anf API to manage conditions in my PF2E game. Currently I use emojis and some formatting tricks to keep the buttons to a manageable size. It looks something like this (abbreviated bcs it's several pages long): `/w gm **Add Condition**%NEWLINE%[👁️](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="text-decoration:line-through;text-align:center;background-color: #b6d7a8;width:20px;height:20px;padding: 0px)[⛑️](!token-mod --set statusmarkers|broken-armor[] --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Broken Armor --index 100 --delete-on-zero&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|BrokenEC}" style="text-decoration:line-through;text-align:center;background-color: #b6d7a8;width:20px;height:20px;padding: 0px) It works fine as-is, but some of the emojis don't quite fit the conditions. So putting together some more tips and tricks, I started converting the macro to use the actual custom token markers as the button: `/w gm **Add Condition**%NEWLINE%[blinded](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png</a>" style="width:20px;height:20px;" title=blinded)[broken armor](!token-mod --set statusmarkers|broken-armor[] --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Broken Armor --index 100 --delete-on-zero&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|BrokenEC}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png</a>" style="width:20px;height:20px;" title=broken armor) I tested it with just one button and it worked, but when I put more than one button, it only displays the last image as one button! I suspect it is only reading the final "img src", and I may have to add something to close the element in one button before it goes to the next, but I don't know the code well enough (my approach is mostly cutting and pasting snippets until it works :P). This macro was going to be my magnum opus, Please help!
Actually something weird is going on when you insert an img tag that way.&nbsp; Macro Mules do not replace html elements the same way that Collection Macros do; however, I just tested this out and realized that the img tag is being deleted on a macro mule Ability. I put this into an Ability: `/w gm **Add Condition**%NEWLINE%[blinded](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png</a>" style="width:20px;height:20px;" title=blinded) [broken armor](!token-mod --set statusmarkers|broken-armor[] --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Broken Armor --index 100 --delete-on-zero&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|BrokenEC}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png</a>" style="width:20px;height:20px;" title=broken armor) I saved it, then immediately reopened it and it changed to this: `/w gm **Add Condition**%NEWLINE%[blinded](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png</a>" style="width:20px;height:20px;" title=broken armor) The first img tag was completely removed! So it seems that in an Ability, Roll20 will only allow a single img tag. But a workaround to this is to put each status into a separate Ability, and call them from the first macro: Macro Mule character named 'Test' with the following Abilities: Conditions `/w gm **Add Condition** %{Test|Blinded} %{Test|BrokenArmor} Blinded [blinded](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png</a>" style="width:20px;height:20px;" title=blinded) BrokenArmor [broken armor](!token-mod --set statusmarkers|broken-armor[] --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Broken Armor --index 100 --delete-on-zero&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|BrokenEC}" style="background-color:transparent;font-size:0px; padding:0px"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png</a>" style="width:20px;height:20px;" title=broken armor) If available, I would also strongly suggest using a template from whichever PF2E sheet you are using, instead of chat messages that simply use '/w gm '. It can help a lot with the formatting, and not requiring the use of %NEWLINE% if the template has a 'description' field that accepts inline line breaks. I'm not familiar enough with the PF2E sheet to know for sure if this is available -- the only template that is listed in the wiki is 'rolls'. It appears that you're setting something up that is slightly similar in concept to my D&amp;D 5E MacroMule - I use the 'npcaction' template widely in that for formatting purposes.
1679671205
G.M. Joe
Pro
Sheet Author
Hi Jarren, thanks for the help. Separating it out into different abilities is a great idea!&nbsp; As for the template, typically I do use the PF2E template, but it's a little bulky, and I'm trying to keep my chat menu small to reduce the amount of scrolling through chat I need to do to find things, but I honestly haven't tried it to see how much room it would take up.... I actually found another way to do this that seems to work: /w gm **Add Condition**%NEWLINE%[blinded" width="20" height="20"](!token-mod --set statusmarkers|blinded[]|-dazzled --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Blinded --index 100 --delete-on-zero&amp;#13;!dct &amp;#64;{target|Target 1|character_name}; Dazzled&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|Blinded}" style="background-color:transparent;font-size:0px; padding:0px" img src=" <a href="https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828421/k18-2i30KYGqgA7gFTmyOg/max.png</a> )[broken armor" width="20" height="20"] ( !token-mod --set statusmarkers|broken-armor[] --ids &amp;#64;{target|Target 1|token_id}&amp;#13;!act -1 10 --&amp;#64;{target|Target 1|character_name}; Broken Armor --index 100 --delete-on-zero&amp;#13;/w &amp;#64;{target|Target 1|character_name} &amp;#37;{Macro|BrokenEC} " style="background-color:transparent;font-size:0px; padding:0px" img src=" <a href="https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/5828422/f-6l5AVMg7r9vFvf5RAUfA/max.png</a> I'll play around with alll of these suggestions as I tweak the macro and eventuall make a version my players can use (which will definitely use the template.
I've been playing around with this a bit more and discovered an annoying quirk of the using templates - they strip out any src tags from chat buttons. Not using a template, it's possible to use an image that links to a Command Button for a TokenMod command: /w gm [Concentrating Text](!token-mod --set statusmarkers|!Concentrating" src="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" #.png) &lt;a href="!token-mod --set statusmarkers|!Concentrating"&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" alt="Concentrating Text"&gt;&lt;/a&gt; Clicking on that button correctly runs the embedded TokenMod command. But when using a template, you can either display an image, or link to a Command Button, but not both: /w gm &amp;{template:npcaction} {{rname=Status Marker List}} {{description=[Concentrating Icon](!token-mod --set statusmarkers|!Concentrating" src="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" #.png) [Concentrating Icon](<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" #.png)}} &lt;a href="!token-mod --set statusmarkers|!Concentrating"&gt;&lt;img alt="Concentrating Icon"&gt;&lt;/a&gt; &lt;a href="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338&quot;&gt;&lt;img" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338"&gt;&lt;img</a> src="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" alt="Concentrating Icon"&gt;&lt;/a&gt; The first one will correctly run the TokenMod command, but doesn't display the 'Concentrating' icon.&nbsp; The second one doesn't run the TokenMod command, but displays the icon and links to the AWS source file. I tried it with the 'default' template and had the same results. I'll keep playing around and see if there's a way to brute force the image while still keeping the Command Button link.
1680018904

Edited 1680019209
I completed a revision of my current Status Marker macro (using TokenMod) using a Macro Mule character so I can easily transfer it between games. So it is &nbsp;possible, though it's a bit of a manual process. Here are my current Status Markers : And here's my previous chat menu with simple text links. It works just fine, but I never liked the pure text aspect of it. Here's my new updated chat menu using the same icons from my custom Status Marker list. And because I'm ridiculous I added a 'scale' factor to the macro mule character to allow me to adjust the size of the icons as well: Each of the icons is a button to toggle the relevant Status Marker (using TokenMod), and has a short label underneath with the name as well as a Tooltip with the name on hover. A sample code for an individual Ability on the 'StatusMarker' macro mule character looks like this: Concentration [ ](!token-mod --set statusmarkers|!Concentrating #" %{StatusMarkers|IconStyle} "&gt;&lt;img src="<a href="https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338" rel="nofollow">https://s3.amazonaws.com/files.d20.io/images/3313606/jl_i-Qpb6wAb1wDuVd9qww/icon.png?1608548338</a>" %{StatusMarkers|IconStyle}" class="showtip" title="Concentrating")[Concentrating](%{StatusMarkers|IconTextStyle}) With reference Abilities: LinkStyle style="background: none; background-color: transparent; border: none; padding: 0px; color: #ce0f69; text-decoration: none; display: inline-block;&nbsp; IconStyle %{StatusMarkers|LinkStyle} width:@{StatusMarkers|size}px; height:@{StatusMarkers|size}px; padding-top: 0px; position: relative; top: 0px; margin: 5px 0px;&nbsp; IconTextStyle #" style="display: inline-block; font-size: @{StatusMarkers|icontextscale}px; position: relative; top: @{StatusMarkers|textsize}px; margin-left: -@{StatusMarkers|size}px; width: @{StatusMarkers|size}px; word-wrap: normal; overflow: hidden; text-align: center; " I found it was easiest to pull all of the status marker urls using the 'inspect' feature in Chrome,&nbsp; and strip out all of the extra html code,&nbsp; then throw the whole thing into Excel to create a list of Abilities to copy into the 'StatusMarkers' macro mule character, but it might be just as easy to cut-and-paste individual items.