Image problem in Twine

Schumius

Level 0

« on: December 09, 2018, 08:57:50 AM »

I'm using SugarCube 2.21.0. This could probably be an easy one for seasoned hands (I'm a complete newbie), but I've been looking everywhere on the web and couldn't find an exact way to solve the problem.

For the cover image of the game, I want it to be clickable yet can scale to whatever window or screen size the player might be using. It's only used in the first page in the whole game. After a whole afternoon of trying I've found the following working:

Code:

<a data-passage="entry">
<img src="imagesharedfromdropbox" width=100% height=100%>
</a>

But when I tried it accidentally on my cellphone, I found the image significantly smaller because it's not stretched horizontally to fill the screen. After more research I found the following:

Goes into Story Stylesheet:

Code:

html { min-height: 100%; }
body {
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

Into the first passage:

Code:

<<script>>
    document.body.style.backgroundImage = "url('imagesharedfromdropbox')";
<</script>>

It scales nicely and the border is gone, but now no matter how I try I can't get it to link to the second passage. The use of <a data-passage> yields no result.

Maybe there's a better way around this problem?


	Logged

Schumius

Level 0

Re: Image problem in Twine

« Reply #1 on: December 10, 2018, 02:15:14 AM »

After more researches on CSS I've found a way around the problem, which is to use the image as scalable background:

Code:

html { min-height: 100%; }
body.cover {
    min-height: 100%;
    background-image: url("sharedfromdropbox.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

I gave the <body> a tag (don't know if that's how it's called). Then I tagged the first passage so the background image shows up there and nowhere else. As it's background image there're no margins around it. Afterwards, I created a transparent image and put it in the first passage and linked it to the second passage, and that solved my problem.


	Logged

oahda

Level 10

Re: Image problem in Twine

« Reply #2 on: December 10, 2018, 02:40:16 AM »

Yeah, vertical stuff in HTML/CSS is a pain. :c

Since you mentioned not being sure about the terminology, cover would be a class and the class="" part of <body class="cover"> is called an attribute, while <body> itself is what's called a tag. c:

I don't know Twine, so I don't know if it's specific to that, but I do know HTML/CSS and using a transparent image feels weird to me. I'm guessing that's what you're using as the clickable element for your link? You should be able to simplify that by removing the image and using CSS to turn the link into a block that spans the entirely of the page both horizontally and vertically instead.

This worked for me (I had to use height rather than min-height in <html> and <body>):

Code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			html { height: 100%; }
			
			body.cover {
				margin: 0; padding: 0; // To make the link start from the very corner.
				height: 100%;
			}
			
			a.coverlink {
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	
	<body class="cover">
		<a href="#" class="coverlink"></a>
	</body>
</html>

If you intend for your game to be playable with a screen reader you might want to make the link accessible by adding a text that shows up when focusing the link:

Code:

<a href="#" class="coverlink" title="Start the game!"></a>

Your solution seems to be working, of course, so you don't have to listen to me if you just want to get on with your game, but just throwing this out there. Tongue


	Logged

Devlog: Ao

Schumius

Level 0

Re: Image problem in Twine

« Reply #3 on: December 10, 2018, 07:33:57 AM »

Thanks for the terminology, Ava, really appreciate that! It is indeed a pain, but it's quite fun also (after I figured out small parts of the pieces anyway). Now I know <body> is called a tag

But there's something I'm not quite sure if I understand you right: is there a class called "cover"? Or were you just using it as an example?

What I've been trying to do is using System.jpg for the first page of my game and make it so that it's scalable and clickable. When you click on it, you will be shown the second page of the game; system.jpg sort of functions like a Start button. But if I put it as an image, it's surrounded by margins which I don't want, I want it to occupy the whole screen horizontally, so I've been tweaking the CSS to get rid of the margins. I got the desired results in the end, but, as a consequence, the text of the whole game also is left without margins. So I started thinking about alternatives, and then the idea of using System.jpg as a background came to me since background images are not affected by margins. But a background image is not clickable, that was why I thought about overlapping it with a transparent image and link that transparent image to the second page of the game. I hope that explains what I'm trying to do.

There're things in your code that I don't yet understand (and I don't even know how to ask haha). I need to study some HTML/CSS tutorials and learn the basics. But it's great to have some ideas! It's a great way to learn (piecing pieces together is almost like a game itself). And it's a great idea to add a text for screen readers, just added that to the game, thanks!


« Last Edit: December 10, 2018, 07:41:06 AM by Schumius »	Logged

oahda

Level 10

Re: Image problem in Twine

« Reply #4 on: December 10, 2018, 09:37:47 AM »

Classes are all user-defined, so there are none "built in"*, if that's what you mean. The CSS syntax .cover means "apply this style to any tag with the class attribute set to cover" whereas body.cover means "apply this style to any <body> tag with the class attribute set to cover".

You could've called it anything else as long as the attribute in the HTML code and the name in the CSS file match each other. There is no special meaning inherent to the name "cover". c:

* None built into HTML/CSS itself, that is; probably the framework you're using for this (SugarCube?) does have classes set up.

If you want to get rid of the border that an image gets when inside of a link tag, you can set its CSS to have border: 0;. c:

But yeah, I would read up on the basics if you're planning on editing the CSS a lot! :p


	Logged

Devlog: Ao

Schumius

Level 0

Re: Image problem in Twine

« Reply #5 on: December 11, 2018, 06:27:24 PM »

Ahh, I see, thanks for the explanation! Time to study HTML and CSS Grin


	Logged

Pages: [1]

« previous next »