Adding images to KNILT
How to add images to your KNILT pages
Option 1: Insert a new image using the tool bar
See this video created by Jianwei Zhang:
Option 2: Use an image uploaded, using basic wiki markups
There are two steps:
- Upload your image into KNILT by clicking the "Upload file" link on the left side of the page.
- Enter an image command to place the image in your document.
KNILT stores your all your images in a folder in your account.
This video explains the basic steps required to add images to your KNILT presentations. In it I discussed the contents of this page.
Loading an image
Let's load the calculus image I just uploaded.
Adding borders and frames to your images
How would this look with a border?
Hardly noticeable.
Let's see if a frame is different.
So it is. You can see the frame and the picture is at the right and not the left. That is because the frame option renders as "a floating block" so it "floats" right to accommodate text, i.e. unless we specify what the image should go.
First, I have to clear the space around the previous image because it is floating. If I do not clear it out, then the next image will just flow into the nearest empty space. Essentially, the following command is like hitting the "return" or "enter" key on a keyboard to start a new line.
Let's put the image in the center of the page.
Now where will the text go?
It will appear in a new line below the image. You cannot place text to either side of a centered image. That is because only left and right blocks float. So if we place an image on the left, the text will fill in the space to the right of it, and if we place one on the right, the text will fill in to the left.
Like this.
This text is on the right because we place the image on the left.
Changing the size of your images
Now suppose we want to enlarge the image. We can do that by specifying its width or its height. You can specify both width and height, but there is no point in doing so because the aspect ratio is fixed. So if you want to distort an image, you must do it elsewhere and import it into KNILT as you with the aspect ratio you want it to have.
This is 500px wide
MediaWiki only implements size changes that do not alter the aspect ratio or make the image larger than it can be. You may only figure this out through trial and error. This image cannot be made higher, but it can be made shorter.
This is 100px high. Since the aspect ratio is 12x10, it is 120px wide by default.
Positioning text around your images
But if we want the text to be someplace other than the top of the picture, we may not specify location of the picture. That will place the picture at the left side of the page. Again, though, I must first clear out the space left vacant by the floating image above. Here is another way to do that with an HTML statement <div> with some embedded CSS (style="clear:left").
Like this. Now the text is in the middle of the picture.
Notice that this applies to both the text that precedes the picture and the text that follows it. That is because the image is being rendered "inline" with the text.
Summary of basic steps
So to summarize, you add images to your KNILT pages by doing the following things:
- Upload the image you want to save into your image folder with the link at the left side of the page.
- Remember what you named it by writing it down, even if you are uploading it immediately.
- Decide if you want your image to have an almost invisible a border, a frame, or to appear as a thumbnail. If you do, then use a pipe | to separate the filename from the option and enter it.
- Frames and thumbnails may have captions. Borders cannot. You add a caption by separating the format option from the caption with another pipe.
- You may also indicate if an image should appear on the left or right, or in the center, or in the default position ("none").
- You can set the size of an image by setting its width or height to a size that the format accepts. You cannot change the aspect ratio of an image.
- If you want to control the position of text alongside an image, you must not specify a position (unless it is "none"). This will place the image inline with the text. Then you can specify if the position of the image relative to the text by adding any of the following options: baseline, sub, super, top, text-top, middle, bottom, text-bottom. Remember, these options move the image up or down relative to the text. They do not move the text.
MediaWiki help page for images
There is much more information on images in MediaWiki on the following help page.
That's all folks! 