Sugarcube question regarding text and image alignment

Harald_Schuster

Cheers,

I'm using Twine 1.4 (because of the image handling) and after a lot of trial and error I decided to use Sugarcube 2 as "engine" (simply because of the somewhat easier management of variables in text and the way radiobuttons and checkboxes are designed + that you can set Setter Links with images) ... anyway ... here's my problem:

On many pages I want to have an image to the left (portrait format) and I want the text to flow along that image to the right. OK, that's quite easily done by prepending img with a <. The problem with that is that once the vertical end of the image is reached the text snaps under it. That's not what I want - I want the text to continue downward as if the image was longer.

In SugarCANE I managed to do that by defining a div style for the image with absolute positioning and by defining absolute positioning for the passage. By not setting a height for the div containing the image the text would not snap back. The left start of the passages was set to just where the image ended.

With SugarCube I cannot duplicate that. Even when I define my own div for the image - when I change the passage alignment (or even when I put the text to the right in a new div) the image is affected as well.

Since I am not really experienced in CSS ... can anyone throw an idea at me how to prevent the text from snapping back when the bottom of the image is reached? I'd also apprechiate any help in how to position the actual text without moving the image as well. I tried a table but I'm no good with HTML tables and while text did flow nicely the text column was way too small compared to the non-table test.

greyelf

Will the image be the same every time it appears, will it be the same for a set of passages, or will it be different for each passage?

mykael

Can you add some white space to the bottom of the image? (Although on wider screens it might look a bit odd.)

Harald_Schuster

The images will not be the same, they will be .... similar ... though. Imagine this: At the start you have the choice of a follower. Let's say you pick the ranger. So, in quite a few pages that deal with the journey you'll have your follower's portrait to the left. But it is dynamic - as the ranger spends arrows, the arrows in the quiver get depleted and this is reflected by a set of 3 images: One with a full quiver, one with a semi-filled quiver and one where the quiver is empty and the bow is worn on the back.

In addition to that the flora and fauna are a bit on the hostile side so accidents may occur - therefore there are also variations of those images showing injuries.

So the image to the left is in most cases of the same dimensions but has varying content.

Harald_Schuster

mykael wrote: »

Can you add some white space to the bottom of the image? (Although on wider screens it might look a bit odd.)

Wouldn't that mean I'd have tofine tune each and every passge once the text is done to see how much space I need and - as you say - with the browser not in full screen so I can manipulate the width to see how the content is displayed?

Setting a fixed heigt has the disadvantage, I think, that the border around the passage will always be drawn around that area and I'd like to have it be drawn either around the image height (if there is little text) or around the text (if there is more text than the image) and have that adjust to the user's browser settings.

That's why I initially tried the table (and I may well end up with it) but I'm looking into table formatting options now because I don't really like the result I'm getting.

greyelf

One potential way to do what you want is to programatically add a new area to the story layout to contain your image which would allow you to style it and the overall story layout. The following simple example shows how to add a new area and how to us a widget to update it, the example consists of four passages.

a. Add the following to your story's script tagged passage, if you don't have one yet then create one using the New Script Here content menu. The code inserts a new div element with an id of #profile into the HTML structure between the #story element and it's child #passages element, the reason it is inserted there and not within the #passages element is because the #passages element (and it's children elements) is destroyed and recreated each time the story moves between passages which means you would also need to re-create the #profile area each time.

$('<div id="profile">Test</div>').insertBefore("#passages");

b. Add the following to your story's widget tagged passage. if you don't have one yet the create a new passage and assign it a widget tag.
The code adds a profile macro which will replace the contents of the new #profile area with whatever text you pass to the new macro.

<<widget "profile">><<if $args[0]>><<replace "#profile">><<print $args[0]>><</replace>><</if>><</widget>>

c. Start passage

You should see the word Test to the left of the passage area, click on the following link to see it change.
[[Next]]

d. Next passage:

You should see the word Hello to the left of the passage area.
<<profile "Hello">>
If you use SugarCube undo (back arrow) button to go back to the previous Passage you will notice that the Hello does *not* change back to Test, this is because that area is outside SugarCube's passage History.

notes:
I did not use images in my example because I don't know how you are storing your images (embedded, external files, hosted files, etc) but it would not take much effort to change the above to handle images instead of text.
I also did not use CSS to style the above because I need to know how you wanted it to look.

Harald_Schuster

Been away for a bit, thus the belated reply

All images reside in ./images relative to the story directory, which works fine in Twine 1 test mode (though not in Twine 2, sigh). All left side images are 512 by 800 pixels. There's other picture sizes but they are all to appear in context and in the "right" pane, so their positioning is never an issue.

Images on the left pane should be smack to the left of the displayed area and text in the right pane should start a few pixels to the right of the right border of the left image.

I've spent some time reading up on html tables and I've found a workable solution but I'll give your example a try as well and see which will work out better. Not being forced to clutter (almost) every passage with a table would be a welcome relief.

greyelf

To show an image instead of text replace the <<print>> macro in the profile widget with something like the following:
note: I am not at a machine with Twine installed so the following has not been tested.

<<print "<img src=\"images/" + $args[0] + "\">">>

... and you would change the call to profile within a passage to something like:

<<profile "ImageNameWithoutFolderName">>