Complicated <img> source inside <<link>> macro

Authoring Twine
, ,
1

Twine Version: 2.6.1
Sugarcube: 2.36.1

I’m trying to replace this (it works fine):

<<link '<img src="img/cards/actions/7.png" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">'>>
            <<replace "#showbattle">>
            <<include "battle step calc">>
            <</replace>>            
            <</link>>

with this (it doesn’t work):

<<link '<img src="'img/cards/actions/'+$playaction.id+'.png'" style="position:relative; left:0; top:0 ; width: 100%; height: `100%">'>>
            <<replace "#showbattle">>
            <<include "battle step calc">>
            <</replace>>            
            <</link>>

It doesn’t work because I have already used single quotes. And I don’t know what I can use instead of single quotes and double quotes to isolate this part.

Any way to reach the goal? I don’t rly want to do every single card manually… (I have 100 cards, its too much)

2

The answer.

  1. Set a temporary variable with the actual source:
<<set _j to "img/cards/actions/"+$testaction.id+".png">>
  1. Use just the temporary variable that you’ve created, and don’t forget @src instead of just src:
<<link '<img @src=_j style="position:relative; left:0; top:0 ; width: 100%; height: `100%">'>>
            <<replace "#showbattle">>
            <<include "battle step calc">>
            <</replace>>            
            <</link>>
1 Like
3

You have a rogue backquote within your style content attribute in the height property’s value, which will break said value. For example, this:

height: `100%

Should be:

height: 100%;

 
Additionally. The following, which uses a backquote expression rather than a temporary variable, should also work:

<<link `'<img @src="img/cards/actions/' + $playaction.id + '.png" style="position:relative; left:0; top:0; width:100%; height:100%;">'`>>
	<<replace "#showbattle">><<include "battle step calc">><</replace>>
<</link>>
1 Like