How to center images?

Mareus
14 Oct 2015, 15:16
I was wondering if anyone knows the code to center images in quest? The way it is currently set up, the immage is automatically set to the left side of the screen. So if you are using small pictures, it looks kind of weird. Is there a simple code to center an image?

Thanks in advance!

XanMag
14 Oct 2015, 21:56
Piggy backing - I haven't messed with images much myself and would like to know for future reference and my tutorial game...

1) Same question as OP - how to center an image. I tried tinkering with PrintCentered but couldn't get anything to work.
2) How do you change the size of the picture? Can you make images smaller. The only size changes I have noticed are entirely accidental. Most are HUGE and some are slightly smaller.

Thanks.

HaganeSteel
14 Oct 2015, 23:26
Images should appear centered by default.

picture ("CarrionFiretake500.png")


That's literally the code for the "Carrion Fire" logo on the title screen.

If you have the status panes enabled, it'll appear to the left of them. If you need to remove the panes for a time in order to display the image, you can use this:

request (Hide, "Panes")


That's probably not helpful, though. Sorry.

I don't believe there's a way to change an image's size. I think you'd need two images of different sizes.

XanMag
14 Oct 2015, 23:44
Sorry if I am a bit daft here...

If I want one image as a large picture and another image as a smaller picture how would I do that? Some pictures I might want half screen or 1/4 screen... it seems that all pictures are full screen which can be annoying especially if there are text messages with them. Does that make sense? I'm sure it has to do with the source upload, but I don't understand it.

Thanks.

HaganeSteel
15 Oct 2015, 00:22
I'm not sure I understand, but I'm going to try to snipe this Husk from across West London with the LAR. That's my way of saying I'm going to try to answer the question, but I likely won't succeed.

If you use the "Show Picture" function, it'll display the image centered and with its default size. You'd have to resize the image in something like GIMP.

You without a doubt know that already, though, so I feel like I'm missing something here.

Can you give me an example?

Forgewright
15 Oct 2015, 04:44
That's what I do.. Resize all the pics I want to use to the same size and it looks very smooth. I add a bit of shadow to make them stand off the page.

Oh, Culture Club's (Do you really want to hurt me) just came on the music station. A bit extreme for a gay group in the 80's but I always liked them. :roll:
culture club.jpg

XanMag
15 Oct 2015, 05:22
Culture Club was... gay!?! Why didn't anyone tell me??! :shock: :lol:

And nope! You're not missing a thing. I'm an idiot and Bob's your uncle.

The Pixie
15 Oct 2015, 06:54
A couple of functions I wrote to put images to the left and right (copy-and-paste into your game code, just before the last line, </aslx>):
 <function name="ImageLeft" parameters="filename"><![CDATA[
msg ("<img src=\"" + GetFileURL(filename) + "\" style=\"float:left; padding:5px;\" />")
]]></function>
<function name="ImageRight" parameters="filename"><![CDATA[
msg ("<img src=\"" + GetFileURL(filename) + "\" style=\"float:right; padding:5px;\" />")
]]></function>

Discussion here:
viewtopic.php?f=10&t=4900&p=32923&hilit=image#p32923

If you want to do other stuff adjust the CSS in the style attribute.

Mareus
15 Oct 2015, 11:26
HaganeSteel wrote:Images should appear centered by default.

picture ("CarrionFiretake500.png")


That is only true for images that are of certain size (for example 1024x600 or 800x600, etc). If you have a square image that is small (for example 100x100) the picture is put to the left. I wish to have it exactly in the center. I read someone on this forums mentioning HTML commands like <center></center>, but I dont know how to incorporate it into the code. And I have no idea if it actually works.

Pertex
15 Oct 2015, 12:17
You can modify The Pixies function a bit:


<function name="ImageCenter" parameters="filename"><![CDATA[
msg ("<center><img src=\"" + GetFileURL(filename) + "\" /></center>")
]]></function>

HaganeSteel
15 Oct 2015, 15:09
Mareus wrote:

"HaganeSteel"

Images should appear centered by default.

picture ("CarrionFiretake500.png")


That is only true for images that are of certain size (for example 1024x600 or 800x600, etc). If you have a square image that is small (for example 100x100) the picture is put to the left. I wish to have it exactly in the center. I read someone on this forums mentioning HTML commands like <center></center>, but I dont know how to incorporate it into the code. And I have no idea if it actually works.



I tested this, and you're right.

The easiest way to solve this is to make your images match the display width. By default, that's 950 pixels.

Create an image that has a width of 950 pixels and center your image within it.

Mareus
15 Oct 2015, 15:28
HaganeSteel wrote:

"Mareus"

[quote="HaganeSteel"]Images should appear centered by default.

picture ("CarrionFiretake500.png")


That is only true for images that are of certain size (for example 1024x600 or 800x600, etc). If you have a square image that is small (for example 100x100) the picture is put to the left. I wish to have it exactly in the center. I read someone on this forums mentioning HTML commands like <center></center>, but I dont know how to incorporate it into the code. And I have no idea if it actually works.



I tested this, and you're right.

The easiest way to solve this is to make your images match the display width. By default, that's 950 pixels.

Create an image that has a width of 950 pixels and center your image within it.[/quote]
Yeah, I was hoping to avoid that by a simple code. I tried Pixies code as well, but I keep getting a broken image icon in the center. I still havent tried Petrex modification. Will report back once i find which solution works best for me.

EDIT: In the end I didnt have much luck with Petrex code, but here is a neat trick for anyone that wishes to center their images. FIrst you create one wide image that stretches across the whole screen. I found that 687 pixels width is the best to work with. Then you color it so that it is the same color as your background in Quest. This is done so that you get a transparent effect. Save it as background. Then just copy the smaller image into the one you just named background. Save and import to quest. Ta daaa! Your smaller image is now neatly centered in Quest window.

PS. How high the image is, depends really on the smaller image you wish to insert. For example, if I wish to insert a 100x100 image, I will make 687x100 background. Hope this helps those that might encounter the same problem.

PS2. Oh yeah... you can use photoshop online to create, edit and do all sorts of stuff with your images: https://pixlr.com/editor/