Examples of image formats
While working on your story, you can use various image formats. However, the most frequently used formats are the following:
- JPEG (.jpg, .jpeg)
- PNG (.png)
- WebP (.webp)
- SVG (.svg, .svgz)
- GIF (.gif) e.g. animation
Inserting images
Using the <img> markup (of the HTML), you can insert an image in a selected place. Please, remember that an image you want to insert into your story must be accessible on-line (you must have a link to this particular image).
Syntax
<img src="image link" width="given in % or px" height="given in % or px" alt="alternative text">
With particular width and height, for example:
<img src="link.jpg" width="480" height="320" alt="Falling watermelon">
<img src="link.png" width="80%" height="60%" alt="Falling watermelon">
<img src="link.gif" width="180" height="90" alt="A beating red heart">Original size of an image (without specifying the width and height), for example:
<img src="link.jpg" alt="Falling watermelon">
<img src="link.webp" alt="Falling watermelon">With the specified width (the height will be set automatically and proportionally), for example:
<img src="link.gif" width="50%" alt="A beating red heart">
<img src="link.png" width="600" alt="Falling watermelon">% and px units
If you decide to use the % units, you need to enter them in the following way, for example: width="80%". It is the value given in relation to the height of an overarching element – for example, in relation to the width of the page.
If you decide to use the px units (pixels), you do not have to enter them, for example: width="480"
The alt="alternative text" attribute can be useful if, for some reasons, the image you have selected cannot be uploaded onto your page. Thanks to the above-mentioned attribute, a text you have selected will appear in this place, with a description of the image. Remember that the alternative text is extremely helpful to disabled players with various sight impairments, who use screen readers to read Internet websites. Hence, such an alternative description of an image comes as a big help for them to become familiar with your website!
Example (free images and photos: pixabay.com)
<img src="https://cdn.pixabay.com/photo/2015/03/04/07/17/parachute-658397_1280.jpg" width="60%" alt="Two parachutists jumping off the plane">
It’s time – Max says to you. There are lots of thoughts running through your head.
You are wondering whether you really want to do it.
A parachute jump has been always a challenge to you.
[[OK! I’m going to jump!->jump]]
[[I’m going to jump but we’ll do it together!->jump with your friend]]
[[No way. Take me out of here!->retreat]]Result
Example (Animation GIF source: https://giphy.com/gifs/XIqCQx02E1U9W)
<center>
You are probably wondering how the person telling you this story looks like.
That’s me – caught in the middle of my creative process.
<img src="https://media.giphy.com/media/XIqCQx02E1U9W/giphy.gif" alt="Kermit the Frog typing on an old typewriter">
</center>Result
Image hosting
Image hosting is needed if you want to store images on a server. You are given a possibility to use images in their on-line versions (using links). It is very useful when you want to use your own images.
I recommend: postimage.org
It is best to get a free account. With a free account, you will be able to access all your images easily.
Copy “Direct link” and paste it to the markup img
<img src="https://i.postimg.cc/7LktBLb3/parachute.jpg" width="100%" alt="description">Images as links
You can also turn images into links to the subsequent fragments of your story. It means that if players click on a particular image they will be transferred to the particular location, as it happens when you click on a text link.
Example
<center>
You are probably wondering how the person telling you this story looks like.
That’s me – caught in the middle of my creative process.
(link: '<img src="https://i.postimg.cc/Hn1PvXQL/sitting-4963159-640.jpg">')[(goto:"jump")]
</center>In the (goto:"jump") macro, you need to provide a name of the already existing slip (fragment of the story).
An editor view
Textcraft – a text generator
You can use a text generator of the Minecraft style visiting the textcraft.net
You just need to enter your text (best without Polish characters), to generate a caption and then to upload it in the PNG format. In order to put it into your GameBook, you should use the postimage.org hosting service and the <img> tag.
You can also use a ready-made GAME OF GDANSK heading.
<center><img src="https://gameofgdansk.eu/twine-tools/header-gog/game-of-gdansk.png" width="100%" alt="GAME OF GDANSK"></center>
License
Please remember that there are copyrights which protect all intellectual property. Therefore, you should use your own materials or materials created by authors who have agreed to share their works, based on the Creative Commons license.