HI there, I am hoping this is a quick fix from all the experienced people out there. I successfully added a background full image to a passage, now I am trying to add just an image inside of a passage. I watched a You tube video, and it also showed me how to make it responsive, so if I resize my browser the image will resize with it.
It works with the text, but the image doesn’t respond to the shrinking of the browser.
This is the code I have - the style part at the top with the max width and height is what he explained would make it responsive, I am not a coder, so I realize it could be as simple as a space or missing a comma I had included my image below that code (which does work), but the save button said I couldn’t include it. So I have removed it. I think I did the preformatted thing right.
at 0815hr you see that Morgan also has 0800hr medications, so you queue the medication in Omnicell MPage for retrieval. You remember that each of your patients has 080hr medications due within the next hour.
Please use the Preformatted Text</> option when including a code example in your comments, as it helps distinguishing the code and stops the forum’s software mistakenly converting Standard quotes into invalid Typographical (curvy) quotes.
Doing this to your example would result in it looking like the following…
It is important that each property assignment inside a CSS rule ends with a semi-colon, as that indicates the end of that assignment. The fact your max-width property assignment is lacking a semi-colon is why your rule it’s working as you expected.
note: I would suggest moving that CSS rule into the Story > Stylesheet area of your project, as doing that will help make all <img> elements in your Passages responsive. I would also alter that rule’s CSS Selector slightly so it better targets <img> elements inside the main “passage” area of the page…
Thanks @Greyelf, I swear I tried to figure out what it mention it. I thought I had to put a single ’ at the front and end of each line in the code, but I guess it may not have worked.
Anyway, thank you for the semi colon explanation and I will give it a shot. And thanks re: storysheet, I thought when the image was on a particular passage maybe I had to do it there, but I get it.
Also, while I have you any chance on explaining something with link colours for me? If I need to do a new thread that is okay too. I have changed my link and my hover colours, but I thought I did the visited correct, but the colours don’t change for visited…any thoughts. And didn’t know what the code was for visited hover…I hope I did the preformatted text correctly this time.
@tvanderpost
Greyelf already recently posted about styling links. Check out the reply here…
…it’s quite in depth, but the most direct take away is that you might have to also style .enchantment-link.
Harlowe has a special DOM View in it’s debug mode when you test your game under the Build menu in Twine. It’s shows the exact HTML objects to target in your CSS to style specific elements in your story. A more advanced way though is to use the Browser’s built-in Inspector. Right click on an element and choose Inspect or press F12. I won’t go into detail about how to use the inspector, but it’s very powerful and can even change the CSS while the game is live. Crazy stuff!
Oh, and when posting code, you can use three ` marks in a row (```) and then on a new line, paste your code, and then three ` marks after your code on a new line to keep it all in one handy box that has more features for viewing and copying for other people reading your posts…
Thanks @HAL9000 I took a quick peak, it may be too advanced for me, and may just stick with the default colours, but appreciate it. And thanks for the tip on the preformatted text. I did try LOL!
I am Canadian too, I think I say sorry in most emails LOL! Thank you so much, this updated code you are showing is what I was hoping to see, that it would be easy to replicate. I very much appreciate you coming back in. I got images to work in my backgrounds and in my passages, so making some progress now.
I would like to thank you both all my link colours are working and my images are appearing.
I have one quick question. I have the images being responsive now which is great. But if I find the image really large is there an easy way to make it 50% of its original size. I found a few forums that mention it but it isn’t 100% clear.
If you want the images to be a fixed size, then use width="400" height="400" instead with whatever pixel sizes you want (400 is just placeholder). Careful about changing the ratio of the image, meaning squishing or stretching, with this method. The percentage way is much easier to use.
You can also use CSS to achieve the same results, but then you have to account for possibly not wanting to scale some images while scaling others and it gets a little more tricky. Also, there are lots of other ways to scale an image using CSS that allow you to have responsive images dependant on the available window space, but that’s only if you want to make something that’s both mobile and desktop friendly at the same time. Just food for thought later down the road.
Make sure that the native dimensions of the image in the file is what you want, before resizing it inside the web-page, that way people aren’t downloading more image than they need.
eg. If you’re designing your project for a 1280 x 720 (720p) sized screen as a default, and the image is meant to fill a 640 x 360 area of the page by default, then it makes no sense to use an image that has native dimensions of 1920 x 1080 (1080p) or greater.
So you would first resize the native dimensions of the image file using your favourite Image File Editor application, which is generally better are resizing images than a web-browser is, and then show the image at its native dimensions in the page.
My previous code only scaled the image to the parent containing element’s width. (50% = half the story area width.) This might still be desirable to you though. You can try different percentages until you get the width you want. If you resize the window, the images will change size though. Test it out and see if that is what you want.
Luckily, there’s always a way around things. If you just want the image to be exactly a percentage of it’s native size, try this:
The <span> tag creates a new parent containing element that tightly wraps around the image, thus the percentages now work as if it’s using the actual native image dimensions and not the available size of your story. It’s a bit of a hack job, but if you resize your browser, you’ll see that the image remains at a constant size.
Also, the { and } characters make Harlowe ignore any new lines. Without them, you’ll notice extra line returns being added. This is purely for legibility. It’s nice to have separate pieces of code on different lines while not affecting the presentation of your story.
Greyelf had a good suggestion with just making the image the size you want it to be in the first place. However, if people zoom in (press “ctrl +” repeatedly to zoom, “ctrl -” to shrink, “ctrl 0” to reset), your images may get a bit blurry. Sometimes there is a benefit to showing images at half size and hiding the extra resolution for special cases, like zooming in. I also believe it might benefit high resolution 4k displays and certain phone displays. It will ensure a higher fidelity when needed.
I have to zoom in a bit because my vision is starting to go. Nothing is ever simple with computers, unfortunately.
The two of you are so kind with your details and your instructions. Do know this is truly appreciated. The demo I am going to be able to show my colleagues now is so much better. We are going to try to use TWINE for scenario construction in our mental health and addiction courses we run in Moodle. And I manage to get TWINE to embed in Moodle which was exciting too…
Thanks to you both again
Teresa
I had included my image below that code (which does work), but the save button said I couldn’t include it. So I have removed it. I think I did the preformatted thing right.