Align Image and Text [SOLVED]

Hello, people.

On my current project, the player may use the "Look at" button to check on NPCs, where the game displays a picture if the given character and a small description of it. Using the GUI, I assigned to the "Look at" button the picture and then the text, what gave me a result of first displaying the picture and then, under it, comes the text. How should i do in order to have the picture at left and then the description text at right, saving some space and saving the player from rolling the page back up in order to see the picture?


Here's what I do. The 2nd line does what you ask...Just paste this whole script into your description script in code view. The image is stored on one of my websites. This way your game size is kept below the 10mb upload limit.

msg ("<img src=\"https://bobslifeblog.files.wordpress.com/2017/12/org-the-orc1.png" + "\" style=\"float:left;\"/>")
msg ("<br>For protection, he wears leather armor and carries a steel sword.<br><br>He jokes around, but his facial expression reads: \"I may be dumb, but if you attack me, I'll pound your anus into the ground\".<br><br>The orcs here are familiar with you but will not hesitate to attack if you start anything.<br>")
msg ("His attack does " + this.damagedicenumber + "d" + this.damagedicesides + "+" + this.damagebonus +"  damage.")
msg ("He has " + this.hitpoints + " hitpoints and is level " + this.level)
msg ("<br></br>{command: Back to the action!}")

To see result

https://bobslifeblog.files.wordpress.com/2018/01/capture1.jpg


There is a tutorial that might help:
http://docs.textadventures.co.uk/quest/images.html


Things making me a little bit confuse here. When using the GUI, Quest expresses the code for the picture as:
picture ("b64ea4421ff63451be6a18c782f6cd9c--beach-pictures-pretty-woman.jpg")
It is not using the img src= command here.

I tried using the Orc code, replacing the picture by the picture name i use here, however it did not show the picture i wanted. It showed that "failed load" thumbnail.

I still studying it, however i wonder if the problem is that i am adding images from my disk to the game instead of collecting it from internet URLs.


I still studying it, however i wonder if the problem is that i am adding images from my disk to the game instead of collecting it from internet URLs.

You are doing it the way Quest expects, so should work. It will copy the file from whereever on your harddrive into your game folder.


Pixie, I will run another test. However, Pixie, tell me something : if I am adding the pictures to my game folder, should I use the GetFile URL in order to compile and publish the game online?


The picture command should do that behind the scenes. If you are not using picture, then yes, you need to use GetFileURL.


Ok. I basically used copy/paste from Pixie and my code ended lke:

msg ("<img src='" + GetFileURL("c53d30bf026c078e98908866f7296c98.jpg") + "' style='float:left;' />")

It is doing right, placing picture at the left and the text at right. The poor text is squeezed against the image, however each one lies on their due side and aligned.


You can add padding:

msg ("<img src='" + GetFileURL("c53d30bf026c078e98908866f7296c98.jpg") + "' style='padding:5px;float:left;' />")

Wow, wish I had learned about the padding. I have been adding to the canvas size of a png image in my paint.net editor.


Perfect, Pixie! It is working very well! Really thank you for the help!


This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums