This post is about how to write up your MHV project here on the web site.

Big or small, simple or complex, that's not the point - the point is to share it with the world!

For the screenshots in this post, I'm going to walk through the process that I used when creating my Robosapien project post. So you can refer to that post to see how things look, once they're finished.

This tutorial doesn't assume any particular familiarity with Drupal (the software that runs this site), or with writing HTML.

First Things First

You will need an account on the web site. If you don't have one, please click here to register and create an account. You'll also need your account upgraded to "Member" status by an admin. If you need this done, you can post on the mailing list or (better yet) tap a committee member on the shoulder at the Hackerspace.

Once you have a member account, you will need to be logged in. You can log in by clicking the "LOG IN" button at the top-right corner of the window.

Create a Story

Projects are called "Stories" in Drupal. To create a new project, start by creating a new story:

Click the "Add A New Post" link at the top-right corner of the site:

Then, click the "Create A Story" link:

Describe Your Project

The next stage is the edit screen where you write up your project. Start by write a short, expressive Title and typing some tags if you have any to add.

Choose the category "Member Projects" so your project automatically turns up in the list on the Projects page.

Write Your Teaser

Next, scroll down to the "Body" edit box. This editor is called FCKEditor.

You want to being by writing the "teaser" for your post. This is a paragraph (or two) at the beginning of the post, but it's also the summary for the front page of the site. It's the text with the "Read More" link below it.

In the teaser, you want to tell people about your project. You also want to get them interested, so they'll click on the Read More link.

Type some text for your teaser, then click the "Insert Teaser Break" button (shown) to split it off from the rest of your post. A red "teaser break" line will appear.

(If your cursor seems to be stuck above the teaser break line after you add it, try pressing the right-arrow key to get past.)

Add a Picture

The teaser is pretty boring without a photo, so we'll add a photo to the right of the text. The photo will be a small thumbnail in a "LightBox", so it automatically zooms up when clicked.

Click to position the cursor at the very beginning of the text, and then click the "Insert/Edit Image" button (shown.)

If (like me) you want to have the image show up next to some text, then you need to insert it before that block of text, not after it.

The "Image Properties" dialog will pop up:

We're going to upload a new photo to the site (if the photo is already on the web somewhere, you can paste in its URL.) Remember that it's considered "bad form" to embed photos that are linked directly from other people's web sites.

Start by clicking "Browse Server". This File Browser will pop up:

The file browser lets you see all of the images that you've upload to the MHV site, and any thumbnail images that were generated. In the example above, I've only uploaded one images - "robo.jpg" - and the site has made me a medium-sized thumbnail picture, "medium_robo.jpg"

To upload a new image, start by clicking the Upload button. Click "Choose File" and find the image you want to upload, then select the thumbnail size( that you want.

Click Upload to send the image to the site. If you have many images to upload, you can go right ahead and upload more.

After the file is uploaded, select the thumbnail (not the original image). It will have an name like "medium_IMG.jpg" or "large_IMG.jpg". Then click the Insert File button:

This inserts the thumbnail into the "Image Info" URL. Fill out the rest of the Image Info, with an "alt text" description of the image. If you want the image to wrap around text, choose an "Align" value (if you want it to set it on its own, leave this blank.) The preview area will show you the picture, and how the text will wrap around it:

When that looks OK, move to the "Link" tab. Click "Browse Server" again, and this time choose the full-size image (ie IMG.jpg not large_IMG.jpg.) It should look like this:

Finally, go to the LightBox tab and check the box "Use LightBox for this image"

Click OK when you're done.

Now the image shows up in the editor like this:

Preview It!

To check the image looks OK, and to preview the whole page, scroll down to the bottom and click the "Preview" button. The page will reload, and at the top you can see a preview version of how it will look when finished:

Check the Preview looks OK, and check the thumbnail pops up in LightBox when you click on it.

Write Some Content

Now it's time to write the rest of your post. Go back to the "Body" box, and start adding text after the red line "Spacer Break". You may need to use the right-arrow key in order to push the cursor past that line.

When writing up projects, I like to use headings to break sections up. I like to use "Heading 2". To use "Heading 2", click on the Format dropdown in the menu:

Choose "Heading 2" and then type your heading. When you press Return at the end of the heading line, you'll automatically go back to typing normal text.

Write up the rest of your project. You can insert more images by using the same techniques described above.

Adding a Link

To add a link to another web site, select the text you want to turn into a link. Then click the "Insert/Edit Link" button:

A dialog will pop up where you can paste the URL to link to. If you want the link to open a new tab/window, then set the target choice to "_blank".

Saving a Draft

It's a good idea to save drafts as you work, because browsers and web sites often crash and you can easily lose work.

To save a draft, scroll down to "Publishing options" and uncheck the "Published" checkbox:

You can then click Save to save the post.

To find your saved post, you'll need to log in and then navigate to the "Projects" tab. It should be there in the news feed, coloured pink because it is still a draft.

When you're ready to publish, just check the "Published" checkbox and click Save again.

What else?

Please post up any comments or questions if there is anything I've missed, or got wrong, here.