WikiKnitting Blog

I have installed and created several add-ons to the standard Mediawiki software to better suit the needs of a wiki about knitting. Today’s post will focus on how to use these features.

Making Color Charts

As I began working with wiki markup I found a gaping hole in its ability to easily make knitting charts. While not impossible or hard using standard tables, the markup is extremely cumbersome and almost impossible to read. So my husband and I sat down and came up with an easier way to create color charts. This is the result. Since we wrote the code for this, let me know if you want additional features or if something isn’t working correctly.

The table must be enclosed in the wiki tags.
<colorchart> </colorchart>

The first row creates the association between the desired HTML color and a single character designator. Both HTML color names and hexadecimal codes can be used. The list must be comma separated and must end in a colon “:” There is no limit to the number of colors that can be defined in the list.

w=white,l=lightblue:

The remaining rows are used to create the color table using the single letter color designators assigned in the first row. The table will be drawn based on these letters. Each letter will create a new cell in the table. Ex: aaaa; gives a 4 column table. Every row of letters will add a row to the table. Each row must end in a semi-colon “;” There is no limit on the number of rows or columns that can be used in the table.


lwlwlwl;

A complete simple table looks like this:

<colorchart>
w=white,l=lightblue:
wlwlwlw;
lwlwlwl;
wwwwwww;
lllllll;
wwwwwww;
lwlwlwl;
wlwlwlw;
</colorchart>

Result:

Options

There are a number of options that can be added inside the <colorcode> tag to customize the table. All, some, or no options can be used. If multiple options are used they should be separated by a single space.

Syntax: <colorcode {option} {option}>

Title – Adds a title to the top of the table

<colorcode title="Color Chart">

Cell Width and Height – Specifies the width and height of the cells in the table.

<colorcode width=50 height=50>

Include Cell Text – Displays the single character designator inside the cell. This is useful for cable or lace charts, where you don’t care about color.

<colorcode text=true>

Row and Column Numbers - Both row and column numbers can be added to the chart by including the grid option.

Note: If the grid argument is true, the minimum cell height and width that can be displayed is 20×20.

<colorcode grid=true>

Adding a Color Legend

Now that you have a color chart you should define for the reader what yarn is used for each color. This method can be used on any page to describe the yarn you are using for a project. You can do that using the Color Legend Template. Templates will be covered in more detail in the next post, but I thought that this fit better here.

Place this text in the edit box of a post to call the template.

{{Color Legend
|color a=lightblue
|color a yarn=Sandnes Mandarin Petit
|color a skeins=1
|color b=white
|color b yarn=[[Sandnes Mandarin Petit]]
|color b skeins=
}}


The template supports up to 10 colors (Letters a-j). Any letters not used will not be displayed.

• color a= This is the html color name or color code for a color. This should match the color chart if one is used.
• color a yarn= Enter the brand name and type of yarn used.
• color a skeins=The number of skeins or balls of yarn required for the project

Adding Videos

Videos often provide a much better medium than text or photos for explaining an unfamiliar concept. WikiKnitting has 2 ways of displaying videos.

YouTube

You can reference video uploaded to YouTube with the YouTube tag. This is useful when you want to add a link to something that already exists on YouTube. Place the YouTube ID for a video between the opening and closing tags.

Tag :
<youtube>ID</youtube>


Ex :

from url http://www.youtube.com/watch?v=M6ZjMWLqJvM
<youtube>
M6ZjMWLqJvM</youtube>


Quicktime

WikiKnitting will also play Quicktime videos that have been directly uploaded to the wiki. Since this wiki is run by me as a hobby, I have limited the upload ability to myself for now. (I don’t want people posting non-knitting videos and me unexpectedly footing the hosting bill.) If you’ve created a knitting video that you want to share, just send me (E.B.) an email and I’ll upload it.

Once a video has been uploaded you can call it using the flowing tag.

<qt>
file=MovieName.mov|width=320|height=256|autoplay=false|controller=true</qt>


Next: Become a Contributor Part 6: Templates

Quick Links
Part 1: Become a Contributor to WikiKnitting
Part 2: Wiki Editing Basics
Part 3: Adding Images
Part 4: Using Tables

Pictures are an important part of any wiki article. This is especially true when you are explaining something or showing off your pattern. Today I will show you how to add images to your articles.

Upload Your Image

Before you can add an image to a wiki article you need to first upload it to the wiki. In order to help keep page load times fast, images should be smaller than 150 KB.

1. Login to your wiki user account. You can create an account for free if you don’t already have one. (See Part 1 for instructions)
2. Click the “Upload File” link in the toolbox on the left hand side of the wiki.
3. The source file name is the path on your computer to the file you wish to upload. You can use the Browse button to navigate and select the file.
4. Select a Destination Filename. The default name is the same name as the source file. However, you can change the filename if you wish. It is important to note that you should use a very descriptive filename such as “Mary’s Blue Baby Booties.jpg” and not a generic filename like “Picture1.jpg”
5. Select “Upload File”
6. After the file has been uploaded you will be taken its new page.
7. Edit this page and add information about the source of the image (such as a photo that you took), the author of the image, and any copyright information associated with the image.

A note on copyright: Know the copyright status of an image before you upload it if you didn’t take/create the image. I will remove images that violate their copyright license if asked to by the owner of the image.
You are now ready to add the image to a wiki article.

Linking to Your Images

A basic internal link is used to display the image. The basic syntax is

[[Image:{image name}|{options}]]

The most basic syntax will show a full size version of the image.

[[Image:Example.jpg]]

It’s a good idea to add alternate text to be shown for text only browsers. You can do this by using the pipe “|” symbol (found above \ on most keyboards) to separate the image name from the alternate text.

[[Image:Example.jpg|Yarn]]

Sometimes you might prefer to show a smaller version of the image. To do that you can use can use the thumb option and specify what size you want the image to be in pixels.

[[Image:Example.jpg|thumb|100px]]

If you add alternate text to a thumbnail it will be shown as a description underneath the image.

[[Image:Example.jpg|thumb|100px|Yarn]]

To adjust where on the page an image is aligned, add right, left, or center as an option to the image link. This works the same for both a full size image or a thumbnail.

[[Image:Example.jpg|center|Yarn]]

[[Image:Example.jpg|thumb|center|Yarn]]

The wiki has a built in gallery feature to easily organize multiple pictures. To create a gallery of thumbnail images, use the gallery tag. This will size all of the images the same and place them in a table automatically. However, using the gallery tag you can’t control the size of the thumbnails. A more flexible, but slightly more complicated option is to use a table to create a gallery. This will be covered in the next tutorial.

<gallery>
Image:Example.jpg|Item 1
Image:Example.jpg|[[Item 2]]
Image:Example.jpg|Item 3
Image:Example.jpg|Item 4
</gallery>

More information about adding images can be found at http://wikiknitting.com/wiki/Help:Images

Stay tuned for Part 4: How to use Tables

Quick Links
Part 1: Become a Contributor to WikiKnitting
Part 2: Wiki Editing Basics