Making a Responsive Image for All Browser Sizes in Sugarcube 2.21

Question

I'm looking to make my Twine story Home screen compatible with multiple devices/screen sizes, and wondered whether anybody knows how to tackle this?

My current code looks like this:

<img src="Images/IntroScreenNew.png" style="margin-top: -40px;" usemap="#imgmap"/>

<map name="imgmap">
    <area shape="rect" coords="1069,628,1233,681" data-passage="Welcome" alt="Continue">
</map>

Which displays an image I've designed aligned to the top and to the left, and maps the coordinates of a button in that image to progress the user to the next page. This doesn't fill the screen on my desktop browser, and undoubtedly doesn't fit many different screen sizes.

I have designed a Large and Small browser image, a Large and Small mobile image, and a Tablet image, but need some help with the coding to make the browser decide which image to choose and how to make the image it chooses fill only the available space (i.e. without scaling the image up so that the user is forced to scroll).

Any help would be much appreciated. Thanks!

Answer 1

I think you are going about this in an overly-difficult way. I may be wrong, and if so, I apologize. But I had a similar problem here just a couple days ago that @Greyelf was able to solve with percentages that scaled automatically.  You can see the full answer there, but the gist was this:

.mapShrink img {
	height: auto; 
	width: auto; 
	max-width: 20%; 
	max-height: 20%;
}

and then in the code I used the following:

@@.mapShrink;[img[PossibleMap]]@@

Have I missed it?

Comments

Thank you for replying to my question and linking me to @Greyelf's answer.

Being pretty much an amateur at all of this, I'm afraid I don't understand the explanation - though it may well be the solution to my problem! Is there any chance you could break it down for me so that I can get a better idea of how to apply this to my own work?

Just to clarify what I'd like - I want the image I've designed to fill the browser window, in all dimensions, without spilling over (so this would likely entail minor cropping in some sizes). Additionally, the images I've designed for mobile are a different aspect-ratio, and the same is true of the image for tablets.

So, I need the code to identify the screen size and select the appropriate image to use from the five available, centre the selected image, and scale it up or down to fill the user's screen (cropping from left and right, or top and bottom, if necessary, to avoid any scrolling horizontally or vertically). Oh, and for each of the five I need it to scale the mapped coordinates for the button as/when it scales the images for display.

---

Yes... using a percentage to determine your image size would do all of this. The only thing at all that gave me pause with the answer I gave you was that you had an image map in there and I am not sure that will scale.  Maybe... but I don't think so.

So let me explain a bit. By adding the :

.mapShrink img {
	height: auto; 
	width: auto; 
	max-width: 20%; 
	max-height: 20%;
}

to your Story Stylesheet you are saying for certain images, scale them down.

This means you don't need to make 10 different images. Just one. The percentages will scale it for you (again, not sure about the image map).

Then... in your passage itself, you tell Twine which images you want to be scaled. So in my case, above, I said if it's got .mapShrink attached to it: then by all means, please shrink my map. And for images that do not have a label called .mapShrink, then just leave those alone and let them be fullsize.

Does that help?

Also, it doesn't crop. It shrinks it.

---

I think I need to disqualify my answer if you NEED the image map. I don't see it doing that.

---

Thank you for your help there, Sage, and for explaining even further!

At this time, the image map is the only way that I'm aware of to make parts of images "clickable" and so is quite an important part of the code.

I've been looking at this for a little while now, and think it may be possible to use this sort of code on a desktop display - but as a large part of the image is also text, simply resizing this for mobile display doesn't seem like the right option.

Thank you again for taking the time to reply though! Perhaps one of the other regulars might have encountered this sort of problem before and have a work around...

Answer 2

You don't state if your released story HTML file (and the images) will be:
a. Hosted on a web-server.
b. Packaged up within an archive file (eg. a ZIP file) for the player to download and play locally.

The Why responsive images article on the MDN web-site may help you understand the complexites of showing such images as well as some of the techniques used to overcome those complexites.

Comments

Once it's finished I'd like to publish on a web-server, as part of my portfolio - does this make a difference to the way it is coded?

Based on the link you included, I've now got this code (I am aware that only the largest imgmap currently has coordinates):

<img srcset="Images/IntroScreenMobileSmall.jpg 320w usemap=#imgmapsmob,
			Images/IntroScreenMobileLarge.jpg 425w usemap=#imgmaplmob,
			Images/IntroScreenTablet.jpg 768w usemap=#imgmaptab,
			Images/IntroScreen.jpg 1024w usemap=#imgmap,
			Images/IntroScreenNew.png 1585w usemap=#imgmaplarge"	
	sizes="(max-width: 320px) 320px,
			(max-width: 425px) 425px,
			(max-width: 768px) 768px,
			(max-width: 1024px) 1024px,
			1585px"
	src="Images/IntroScreenNew.png"/>

<map name="imgmapsmob">
    <area shape="rect" coords="?,?,?,?" data-passage="Welcome" alt="Continue">
</map>

<map name="imgmaplmob">
    <area shape="rect" coords="?,?,?,?" data-passage="Welcome" alt="Continue">
</map>

<map name="imgmaptab">
    <area shape="rect" coords="?,?,?,?" data-passage="Welcome" alt="Continue">
</map>

<map name="imgmap">
    <area shape="rect" coords="?,?,?,?" data-passage="Welcome" alt="Continue">
</map>

<map name="imgmaplarge">
    <area shape="rect" coords="1069,628,1233,681" data-passage="Welcome" alt="Continue">
</map>

But it doesn't seem to be working. As you can see I've included the imgmap elements in the srcset and I'm guessing that is causing some issues?

---

warning: Most Operating Systems (other than Windows) and web-servers are case-sensitive when it comes to folder & file names, because of this it is generally recommend to only use a single letter case (normally lower-case) in the naming of these things.

> and I'm guessing that is causing some issues?

You guess correctly.

What happens if you go back to using a single map element as the usemap target?
eg.

<img usemap="imgmap" srcset="Images/IntroScreenMobileSmall.jpg 320w,
			Images/IntroScreenMobileLarge.jpg 425w,
			Images/IntroScreenTablet.jpg 768w,
			Images/IntroScreen.jpg 1024w,
			Images/IntroScreenNew.png 1585w"	
	sizes="(max-width: 320px) 320px,
			(max-width: 425px) 425px,
			(max-width: 768px) 768px,
			(max-width: 1024px) 1024px,
			1585px"
	src="Images/IntroScreenNew.png"/>

<map name="imgmap">
    <area shape="rect" coords="1069,628,1233,681" data-passage="Welcome" alt="Continue">
</map>

 

---

This works, and maps the clickable section on the larger image correctly. However (and I suspect this is due to having only a single imgmap), scaled versions of this image don't map the clickable section over the button in the image.

Thank you for noting that about lower and upper case - I'll sort that before I upload it to my site!

Any ideas on how else to tackle this image issue?