Sugarcube question regarding text and image alignment

Comments

• greyelf

  January 2016

  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

  January 2016

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

  January 2016

  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

  January 2016

  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

  January 2016

  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

  January 2016

  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

  January 2016

  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">>