Top 5 things you need to know how to do on the wiki
Instructions for uploading images, inserting images, and labeling 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:
Click the Upload a Math Image button. That brings up a pop-up window that looks like this:
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:
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:
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
There are three parts to making these tags.
- 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:
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.
- 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.
- 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 provide and format feedback, including changing font color
One really important aspect of working on the Math Images Project is providing feedback on other people's pages. Feedback is usually provided using a page's discussion page, which you get to by clicking on the discussion tab at the top of any page:
As of summer 2011, we decided it would be helpful to give feedback following the same outline as the page. This means that either the page creator or the first commenter should replicate the page's headings on the discussion page (with an extra section for general comments).
…the outline in the discussion page should look like this:
=General Comments= =Basic Description= ==Basic Description Subsection== =A More Mathematical Explanation= ==MME Subsection 1== ==MME Subsection 2== =Why It's Interesting=
If the page has teaching materials, you'll probably want to include that section too.
Once the outline is created, everyone giving feedback should try and follow it.
Timestamping and color-coding
It's important to be able to tell who left each comment, and when. One way to help with this is to use user- and timestamps. The wiki allows you to create these by using tildes. When you write
the wiki replaces it with your username. For example, when I write it, it shows up as Kate. The wiki replaces the tildes in the code for the page too, so if you look at this section you won't see them, but trust me, that's what I wrote. Four tildes gives you your username and the current date and time (using the UTC timezone):
Kate 17:19, 22 July 2011 (UTC)
Putting a timestamp at the beginning or end of every comment you make will make it much easier to tell where comments came from.
Another way to make it easier to identify comments is for each person to choose one color to make all their comments in. The code to change your font color is:
<font color=COLORNAME>This text will come out whatever color you put in for COLORNAME.</font>
For example, this text is blue.
Make sure to close your font tags! You don't want to make the whole page red! Also, be aware that if you're using bullets, this code:
*<font color=COLORNAME>First point **Subsequent point</font>
doesn't work, the rest of the page will be whatever color you wrote in the tag. In general, put your font tags on their own lines to make sure that they start and end where you want them to.A list of all of the color names that are supported in the wiki can be found here.
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>
The above code produces this balloon: I'm a balloonLet's have some math:
You can make balloons that are also links. It will look like a regular balloon - it'll be green and when the reader mouses over, the pop up will show - but when the reader clicks, it will act as a normal link, so you can send them to another page or to an anchor somewhere else in the page. The way you do that is just to add a link field in the code:
<balloon title="Click to go to the balloon section of the Wiki Tricks page" link="http://mathforum.org/mathimages/index.php/Help:Wiki_Tricks#Mouse_Overs">I'm a balloon AND a link!</balloon>This code makes a balloon that looks like this: I'm a balloon AND a link!