note: When working on the layout & styling of the HTML elements that makeup the current page it is generally a good idea to view the structure of them using the inspect feature of your web-browser’s Web Developer Tools.
I looked at the HTML element structure of the following variation of your example, which I have added a little formatting too so that it was easier to see the alignment of the start & end of each hook & element. I also removed the SPACE character between the (if:) macro calls and their associated Hook.
(if: $somevariable is 1)[\
<div
style="position: relative; width: 1250px; height: 1700px">
<img
src="example1.jpg"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
(if: $othervariable is 1)[\
<img
src="example2.png"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
</div>
If I run the above (and your own variant) without initialising the $somevariable and $othervariable variables a HTML structure like the following is generated.
<tw-expression type="macro" name="if" return="changer" class="false"></tw-expression>
<tw-hook></tw-hook>
<br>
<tw-expression type="macro" name="if" return="changer" class="false"></tw-expression>
<tw-hook></tw-hook>
<br>
You will likely notice a couple of things:
- Both the
(if:) macro and its associated Hook are represented by custom HTML elements named <tw-expression> and <tw-hook>.
- the (non-escaped) line-breaks in my & your examples have being automatically converted into HTML
<br> elements.
If I initialised the two Story Variables to 1 the HTML structure changes to the following.
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<div style="position: relative; width: 1250px; height: 1700px" data-raw="">
<br>
<img src="example1.jpg" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</div>
</tw-hook>
<br>
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<img src="example2.png" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</tw-hook>
<br>
And you will likely notice a couple of things:
- The
<div> element both starts & ends within the 1st <tw-hook> element, even though the end </div> tag in the Passage content is placed after the end of the 2nd Hook.
- An additional
<br> element has been added to the structure before the 1st <img> element.
The reason the web-browsers has ended the <div> element early is because the start & end tags of HTML elements can’t interlace.
<!-- An INVALID HTML structure -->
<tw-hook>
<div>
</tw-hook>
</div>
<!-- VALID variations of the above -->
<tw-hook>
<div>
</div>
</tw-hook>
or
<div>
<tw-hook>
</tw-hook>
</div>
If we fix the element interlacing issue with the Passage content…
<div
style="position: relative; width: 1250px; height: 1700px">
(if: $somevariable is 1)[\
<img
src="example1.jpg"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
(if: $othervariable is 1)[\
<img
src="example2.png"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
</div>
…then the HTML structure changes to the following…
<div style="position: relative; width: 1250px; height: 1700px" data-raw="">
<br>
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<img src="example1.jpg" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</tw-hook>
<br>
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<img src="example2.png" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</tw-hook>
<br>
</div>
…which is structurally correct, however there may still be an issue with the CSS controlled visual alignment of the elements. And this is like because the <br> elements are adding unwanted blank lines to the visual output, which can be overcome by wrapping the <div> element in the Passage in Collapsing Whitespace markup.
{
<div
style="position: relative; width: 1250px; height: 1700px">
(if: $somevariable is 1)[\
<img
src="example1.jpg"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
(if: $othervariable is 1)[\
<img
src="example2.png"
style="position: absolute; left: 0; top: 0; width: 100%; height: 100%">\
]
</div>
}
…which generates the following HTML structure, which has no <br> elements…
<tw-collapsed>
<div style="position: relative; width: 1250px; height: 1700px" data-raw="">
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<img src="example1.jpg" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</tw-hook>
<tw-expression type="macro" name="if" return="changer"></tw-expression>
<tw-hook>
<img src="example2.png" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%" data-raw="">
</tw-hook>
</div>
</tw-collapsed>