Positioning an image with attached text

Twine Version: 2.3.9
Story Format: SugarCube 2.31.1

I need to position a picture at a certain position and link a text to it. These are the two solutions I found to the different problems but I cant find a way to combine the two. They work by themselves but I just started with Twine so Im having a hard time understanding the correct syntax.

Solution 1:

<<set _picPos = "left: 300px; top: 313px;">>
<img src="image.jpg"_picPos + 'width: 125px; height: 125px; position: absolute;'">
Solution 2:
<img src="image.jpg" align="left"> Your Text here.

How would you go about to combine these or do you have a different solution?

You don’t really give enough information about what you want to give you an answer.

Is the image supposed to be included among text, so that the text wraps around it, or is any text around it going to be either above or below the image?

Do you want the image aligned to the left, right, center, top, bottom, or some combination of those things?

When you say “link a text” to the image, what do you mean? Do you perhaps want a caption for the image to be centered below it? Or something else? Do you want a border of some sort around both of them?

Also, the second line in this code you provided isn’t valid:

<<set _picPos = "left: 300px; top: 313px;">>
<img src="image.jpg"_picPos + 'width: 125px; height: 125px; position: absolute;'">

I assume you meant to write this:

<<set _picPos = "left: 300px; top: 313px;">>
<img src="image.jpg" @style="_picPos + 'width: 125px; height: 125px; position: absolute;'">

As for combining your “Solution 1” and “Solution 2”, you can’t. The absolute positioning plus setting the “left” position vs the align="left" code are two mutually exclusive settings. You can do one or the other, but not both, because they contradict each other.

You’ll need to describe exactly how you want to position the image (plus the caption, if there is one) relative to the rest of the text before someone can answer your question.

You might just want to do a Google search on “CSS align image” or something like that for help with the CSS you’re trying to implement. That should help you find pages like “CSS Layout - Horizontal & Vertical Align” or “How to Align and float images with CSS” which might provide the kind of information you’re looking for.

Hope that helps! :grinning:

Well, what Im trying to make is basically a shop. Pictures of the items with a clickable text (passage) thats bound to it so it doesnt matter if you resize the window. Design isnt important right now, I just need to figure out how positioning works I guess. Ill look at what you have linked, thanks :slight_smile:

And yeah I copied the wrong code ^^ the one I posted was the one I was screwing around with…

I think I managed to do it actually.

I used this in the stylesheet to get some columns:

.twocolumn {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}

And then I used this from your post:

<div class="twocolumn"><div style="text-align: left"><img src="media/picture.jpg" width="100px" height="125px" /></div>[[Item1 ->Testing Grounds]]

<div style="text-align: left"><img src="media/picture.jpg" width="100px" height="125px" /></div>[[tem2 ->Testing Grounds]]
</div>

I have no Idea if this is even remotely efficient but it works so I guess I cant be mad