[Sugarcube 2.0] Help with placing an image, at the right location

Comments

• idling

  June 2017 edited June 2017

  For this you might want to consider adding a new div element:
  
  Go to your css stylesheet. First we need to move our regular #story to the side to make room for our new image:
  

  #story {
  	margin-left: 40em;
  }
  

  
  Adjust the size until it fits your needs.
  
  Next we'll create a new div element to house our image:
  

  #image-bar {
  	position: fixed;
  	z-index: 50;
    	background-color: rgba(0, 0, 0, 0.5);
  	width: 20em;
  	left: 18em;
    	bottom: 0.25em;
    	top: 0.25em;
  }
  

  
  Then we head over to our JavaScript to add the newly created element to our game:
  

  $('<div id="image-bar"></div>').appendTo(document.body);
  

  
  Check out how it looks and once again adjust its properties to fit your needs.
  
  Now we want the new div-element to display an image. For that we will create a passage called for example "image" and put the needed image in there. For example:

  [img[https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png]]
  

  By adding this:

  <<replace "#image-bar">><<display "image">><</replace>>
  

  to StoryInit for example, we will then display the content of the passage "image" within our newly created Div element.
  
  Alternatively you might also work with CSS styling tables instead, depending on your needs.
• Sylen

  June 2017 edited June 2017

  idling wrote: »

  For this you might want to consider adding a new div element:
  
  Go to your css stylesheet. First we need to move our regular #story to the side to make room for our new image:
  

  
  I was able to make the #image-bar
  
  and it does create the room necessary for the image.
  
  I can't get my image to display in the area though
  
  the image-bar area contains this error instead: Error: <<display>>: passage "image" does not exist
  
  I am guessing i must have named something wrong, like the passage? but naming the passage "image" does not fix the issue
  
  also, it could be that i am trying to load the image from my album, like this: images/teacup.jpg
  
  EDIT: okay so i got the image to display (i misunderstood what you meant with passage, i made a seperate passage for the image to be displayed, and that made it work)
  
  I have a new problem though. Whilst the image is displayed, it seems to ignore width and height and fill out the area. Also the text in the main text area dissapears completely.
  
  Any idea what might be causing this?
  
  EDIT#2: Okay, so i managaed to fix that as well by manually re-sizing the image directly.
  
  Now to my last and final request (sorry for my incompetence!)
  
  How can i make the position of the image (or in this case, the <div> i think) stick to the initial background.
  
  When you press the top-left button, which hides the Story UI (sliding it to the left), then the main text slides with it, and is hidden behind the image, because the image does not follow.
  
  I tried changing the "position" from fixed to absolute and so on, which made no difference, any ideas on how i could accomplish this?
  
  Thanks a ton so far!
  
  
• idling

  June 2017 edited June 2017

  Sorry - don't know enough JavaScript to help you there. Why not just either disable stowing the sidebar, or position the div element to the right instead? Also you could just put your image into the UI-bar instead of hosting it in a seperate div.
• Chapel

  June 2017

  I think the easiest solution would be to make the image wrapper a child of the passage or story element so it moves with everything.
• greyelf

  June 2017

  When you 'stow' the side-bar the #ui-bar element is assigned a CSS class of stowed, this class is removed when you unstow the side-bar. There is/are CSS selector(s) related to that class which resize things like the left margin of the #story element, you will need to do similar things with your own #image-bar element.
  
  The follow CSS example is based on the examples originally supplied by idling, it adjusts the properties of both the #story and #image-bar elements for the 'stowed' state.

  #ui-bar.stowed~#story {
  	margin-left: 10em;
  }
  #ui-bar.stowed~#image-bar {
  	left: 2.5em;
  }
  

  ... to achieve the same horizontal transition as the side-bar you will need to extend your existing #image-bar selector like so:

  #image-bar {
  	transition: left .2s ease-in;
  }
  
  

  
  note: You may need to adjust some of the EM values to suit your actual layout.
• Sylen

  July 2017

  Thanks, That seems to do it.
  
  Thanks for the help everyone!