Top 5 things you need to know how to do on the wiki

From Math Images
Revision as of 20:10, 21 July 2011 by Kderosier (talk | contribs) (Balloons)
Jump to: navigation, search


Instructions for uploading images, inserting images, and labeling images.

Uploading images

To upload the main image for your page, use the upload button inside the Create an Image Page form, which you get to from the sidebar. When you access the form, it looks like this:

Demo Image.gif

Click the Upload a Math Image button. That brings up a pop-up window that looks like this:

Demo Image2.gif

First click the Browse button and find your file. Then click the Upload File button. Fill out the rest of the form, press Save Page, and your image is up!

To upload other images, use the Upload a File form, also located in the sidebar. It's essentially the same form as in the pop-up window from the Create an Image Page form. Click the Browse button, find your file, and then click Upload File:

Demo Image3.gif

You might also want to use the Summary box to put in image credits, although you can also do that after the fact.

Inserting images in your page

The basic code you use to put an image in your page is:


Where you FILE_NAME.ext with the name of your file.

You can add extra things to the image tag to make your layout nicer. To re-size your image, you add NUMpx, where NUM is the the width you want for your image. This tag would makes the picture 500 pixels wide:


This image uses lots of fancy formatting.

To align an image, you use center, left, and right. The tag below will make the image be on the right side of the page, your text will wrap around it:


If you want to add a caption to your image, you can use frame or thumb. Frame doesn't allow you to re-size the image. Even if you put the code for re-sizing in, it just won't work. Thumb lets you re-size the image.

[[Image:FILE_NAME.gif|frame|Your caption goes here.]]
[[Image:FILE_NAME.gif|thumb|300px|Your caption goes here.]]

The following tag combines the above options, and produces the image shown to the right.

[[Image:Elephant.jpg|right|thumb|250px|This image uses lots of fancy formatting.]]

Linking image tags

Instructions for how to do linking image tags in text and in captions, as can be seen in the pages Quipu and Basic Trig:

There are three parts to making these tags.

  1. Creating the anchor.

This is the spot on the page that the links will jump you to - it doesn't have to be an image, but that's the application of this code we're focusing on. Right before your image code, type:

<div id="NAME"></div>

This name should be something you will remember. It won't show up on the page, but you will need to use it later in the code. It can be something simple like "Image1", but it can also be more descriptive, like "trianglepic". Make sure there's no text or empty space between this code and your image - you can even put the "</div>" after your image if you want.

  1. Putting a link in your caption.

In the caption part of your image tag, link to your anchor the same way you'd link to any section on the page. Your image code should look like this:

[[Image:FakeImage.jpg|frame| [[PageTitle#NAME|Image #]]. Any other text you want in the caption. ]]

Obviously, you need to replace FakeImage.jpg with your image's filename, PageTitle with the title of your page, NAME with the anchor name you used in the last step. "Image #" is what the link will look like - so replace the "#" with whatever number you want, or, if you want to call the whole things something else, you can do that too.

  1. Putting a link in your text.

This is just like putting a link in your caption, except its in the body of your text. It should look like this:

Here's some awesome text that's going to tell you to look at [[PageTitle#NAME|Image #]] for clarification.
Again, PageTitle, NAME, and # need to be replaced with what these things are actually called on your page.



Instructions for how to make balloons.

Balloons are really handy for when you want to use a term that not all readers may be familiar with. You can put the definition in the balloon, and readers who don't know the word can find out the definition without you having to upset the flow of your sentence. The code for a balloon is pretty simple, it looks like this:

<balloon title="This is the stuff that shows up in the balloon">Balloons are fun!</balloon>

That code makes a balloon that looks like this: Balloons are fun!

If you want to put math writing or images inside your balloon, it's a little more complicated. You need to put the content of the balloon inside a span tag, and then inside the balloon tag, you tell it to load the content from the span. The code for that looks like this:

<balloon title="load:title of content">I'm a balloon</balloon><span id="title of content" style="display:none">Let's have some math: <math>x^2 + y^2 = z^2</math></span>