Howdy, Stranger!

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

Help with Image Boxes - sugarcane

Hi all!
I'm working on a game with character art, and I'm wondering how to insert an image on the side, in a separate box from the text box?
I've tried reading the forums and this helped:

https://twinery.org/forum/discussion/5148/creating-a-seperate-box-for-images

But I don't know CSS and all that well enough to change it for what I need! I'm trying to get a smaller box for images on the left side (and so the pictures automatically fit), and a larger box on the centre/right. My game has a decent amount of text so I'd like it to be able to be larger, depending on how much text there is. I like the rounded borders of the example greyelf gave but maybe not a double line... and also when I was playing around with their example, the image bled through to in between the two border lines.

I think my best bet is finding out how to build this from scratch, I dunno.

Any help is greatly appreciated! I'm new to all this and am lost on what to do here.
(I'm using Twine 1.4.2 with sugarcane)

Thank you!!!!

Comments

  • 1. Moving the side-bar to the top of page.

    You did not state if you wanted the default side-bar show across the top of the page or not so I am assuming that you do. The following CSS re-positions the side-bar, it should be placed at the top of your story's main stylesheet tagged passage.

    The CSS does not change Sugacane's default colours but I have included commented out code where such changes would be made if you wanted the black on white effect.
    /* Reposition Side-bar across top of page. */
    body {
    	margin: 10em 0 10em 0;
    	height: 100%;
    	font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
    	/*
    	color: black;
    	background-color: white;
    	*/
    	text-align: left;
    }
    #sidebar {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 99.2%;
    	overflow-x: hidden;
    	/* border-bottom: solid black 1px; */
    	border-bottom: solid white 1px;
    }
    #sidebar * {
    	/* color: black !important; */
    	background-color: clear !important;
    	display: inline !important;
    	font-size: 1.5rem;
    }
    #sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {
    	text-decoration: underline !important;
    }
    #sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {
    	/*
    	color: white !important;
    	background-color: black !important;
    	*/
    	font-size: 1.5rem;
    	display: inline !important;
    }
    #sidebar li, #sidebar li > span {
    	margin-left: 1rem;
    	margin-right: 1rem;
    }
    #sidebar a, #sidebar a:hover {
    	border: 0 !important;
    	box-shadow: none;
    }
    .menu {
    	/*
    	color: black;
    	background-color: white;
    	*/
    	opacity: 1;
    	font-size: 1.5rem;
    	/* border: solid black 1px;
    	box-shadow: black 0.1em 0.1em 0; */
    	border: solid white 1px;
    	box-shadow: white 0.1em 0.1em 0;
    }
    .menu div:hover {
    	/*
    	background-color: black;
    	color: white;
    	*/
    }
    #credits, #share, #titleSeparator, #sidebar li br {
    	display: none !important;
    }
    

    2. Re-position the passage Header to where the side-bar original was.

    The Passage Header is where you will be displaying your images, place the following CSS in your story's main stylesheet tagged passage directly after the CSS in point 1.
    /* Reposition Passage Header to left side of page. */
    .passage .header {
    	position: absolute;
    	top: 0;
    	left: -14em;
    	width: 13em;
    	height: 13em;
    	overflow-x: hidden;
    	border: solid white 1px;
    	border-radius: 1em;
    }
    
    note: The width of the header (13em), the distance the header is moved to the left (-14em), and the margin-left of #passages element (18.2em) are closely related. If you wish to increase the width of the header then you will also need to increase the other two values by a similar amount.

    3. Showing an image within the passage header.

    You will use passage tags to control which image is shown in each passage of your story, the names of each of the different tags is up to you. In the following example I will use a blueman tag and I will be using an embedded image in an image passage named blue-man but the method works for externally referenced images as well.

    a. Add one of your controlling tags to the first passage you want to see an image in, in this example that will be the Start passage and I will be using the blueman tag.

    b. Create a new stylesheet passage and add the same tag you used in a. to the new passage's existing tags, then place the CSS like the following within this new passage.
    .passage .header {
    	background-image: [img[blue-man]];
    }
    
    ... replace the [img[blue-man]] in the above with a url('folder-name/image-name.png') if you are using externally referenced images.

    c. If using embedded image, then first add the image to your project and then re-title the image passage to be the same as the [img[passage-name]] reference in point b. So in my case I re-titled the image passage to blue-man

    note: There is a more advance tag based method which uses Javascript to control which tag is in effect, which allows the same image to be shown for a sequence of passages.
  • Oh my gosh thank you so much!!!!! This was amazingly helpful and thank you for explaining the different steps - it makes it easier to learn how to do this myself! Thank you!!!!!!!
Sign In or Register to comment.