Need help removing spaces between rows of images

Authoring Twine
#1

Twine Version: 2.3.4
Story Format: Sugarcube 2.29.0

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.

2rows

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.

#2

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>
#3

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:

tshape
tshape357×542 1.12 KB

Should I be using a different approach to have 4 images display in an unbroken square?

#4

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
#5

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!

#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?

#7

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
#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. :+1: :sunglasses:

#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! :slight_smile:

2 Likes
#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: :sunglasses:

1 Like