Twine Version: 2.3.4
I want to have a 2x2 grid of clickable images, but there’s a gap between the two rows that I can’t get rid of.
I’m trying to make that into a solid gray square, without the brown line in the middle. It’s in the StoryCaption passage so that it appears in the sidebar.
I don’t know enough about HTML (or CSS) to fix this. Here is the code I am using:
<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>
Please excuse my ignorance, and thank you for your help.
The space is a line break, so either put a line continuation at the beginning of the second line or simply make them one line. For example:
<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
\<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>
I tried making it one line, but that didn’t work. Then I tried the line continuation, and it still displayed the line break.
After that, I ignored the warning in the documentation link you provided and wrapped the whole thing in <nobr> tags, so this happened:
Should I be using a different approach to have 4 images display in an unbroken square?
Ah. Mistook what you were attempting there.
The large space there is from the default line-height used to make the text more readable.
Try wrapping the images in a <div> and setting its line-height to 0. For example:
<div style="line-height: 0;">
<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>
</div>
Ideally, you’d make a class out of that for reuse, but you should get the general idea.
2 Likes
Perfect! That was exactly what I needed.
And you’re right, making a class out of it helps format other parts of the story. Thanks!
pete_cards
February 10, 2021, 9:20pm
#6
This is really good @TheMadExile - thanks. Can You tell me how I could do this for four images in a column (one on top of the other), rather than in a 2 x 2 square?
I can say how I’d do it, but my approach might have problems:
I’d set the “width=50%” to “width=100%” so that each image takes up the entire width of the column.
<div style="line-height: 0;">
<a data-passage="$top"><img @src=$topImg width=100%></a><a data-passage="$firstmiddle"><img @src=$firstmiddleImg width=100%></a><a data-passage="$secondmiddle"><img @src=$secondmiddleImg width=100%></a>
<a data-passage="$bottom"><img @src=$bottomImg width=100%></a>
</div>
1 Like
pete_cards
February 10, 2021, 10:06pm
#8
Awesome! This works. Big thanks @BitterlyIndifferent
It seems anything over 50% will force the next image onto the next line, without spacing, which looks promising for my game.
Thank you so much.
HiEv
February 11, 2021, 2:43am
#9
I’ll add that the values for any attributes within an HTML element should be within single- or double-quotes, and that you probably don’t want to scale up images, since then they can look pixelated. Also, I’m guessing you probably want them centered. In other words:
<div style="line-height: 0;">
<center>
<a data-passage="$top"><img @src="$topImg" style="max-width: 100%"></a>
<a data-passage="$firstmiddle"><img @src="$firstmiddleImg" style="max-width: 100%"></a>
<a data-passage="$secondmiddle"><img @src="$secondmiddleImg" style="max-width: 100%"></a>
<a data-passage="$bottom"><img @src="$bottomImg" style="max-width: 100%"></a>
</center>
</div>
Hope that helps!
2 Likes
pete_cards
February 11, 2021, 10:37pm
#10
This is very useful. Thank you so much HiEv. Centralising the images is going to look great. Now I’ve got a lot of coding to do.
1 Like
