Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

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

Hello everyone!

I was wondering if it was possible to place an image to side of the main text area in the base design of sugarcube 2.0 much like in the example that i have posted below.

If not, then is it possible to make an image wrap around the text and float to the right side instead?

Thanks in advance! :)


  • 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:
    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.
  • 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! :smiley:

  • 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.
  • 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.
  • 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.
  • Thanks, That seems to do it.

    Thanks for the help everyone! :smiley:
Sign In or Register to comment.