Now you've signed up to the site as a member, to share information with others you'll need to create some content. Here's how to get started...

Uploading and storing files

As a registered member you have your own personal storage area on line that you can upload files to. It looks similar to the picture above and is accessed by clicking on My Account then File Browser. It's empty by default and you have a quota of 5MB that you can upload files of the following types - jpg, pdf, gif, pdf, doc, txt. You can access and link to any files stored here in your content/articles.

As this is a slightly more complicated process, it would be useful to have a printed copy in front of you as you work thorugh it. Click on the following file to download a PDF verion of the tutorial.

• Creating your own Content - with pictures - download file

Creating an Article

When you are logged in, choose the Create Content option in the main navigation menu. We're going to cover create an Article in this tutorial. Select the Article option and you'll see a screen similar to the above. If you've used a Word Processor, the toolbox and the various buttons under the Body heading will look vaguely familiar.

If the article you wanted to Publish was straightforward text, it would be a simple matter of putting some text into the Title [1] box and the Body [2] box (your article), then clicking on the Preview [4] button to see how it would look. If all was ok, click Save [3] and the article's Published on the site.

You can apply some basic formatting; font size and colour, bold, italic, text alignment, lists, etc. to stylise your text, but be aware that this might not come out exactly as you'd exectt; always check the Preview before you commit to Publishing.

This should something like the next image.

Adding a picture

For a more interesting article, a picture always helps. You should have your image already stored on your computer befre you begin this. Images will be resized to no larger than 900 x 600 pixels during the upload process so don't worry if yours is larger than that to begin with. Images should be in JPEG format preferably , though GIF and PNG will also work too.

Insert the text cursor into the body text where you want the image to be placed - at the start of line one in this instance. Click on the Picture button in the toolbar to open up the picture selection dialogue box, as shown here.

We're going to upload a new picture and insert it into the text. You could also choose an image you'd previously uploaded to your storage area as described earlier, but we'll do everything in one step here.

Look to the right of Image URL box and you'll see a small icon; Click on this and you'll have another dialogue box open that shows you your personal file storage on Delphwynd.net.

Upload your image

In the example above example, we're starting with a completely empty folder

Click on the Upload link at the top of the window.

Next, click the Browse button and locate your file on your computer. Open this and the path to this file will be inserted similar to that as shown above.

You should create a thumbnail for displaying in the article, that links to the bigger image if you want. Do this by choosing a suitable option in the Create Thumbnails section. Now click on Upload...

If all goes well, the image will now appear in your list of uploaded files and clicking it will show a preview of it. There will be the thumbnail version shown also. Highlight this as we'll be using this in your article.

Click "Send to TinyMCE"

Format your image

Back in the Insert/Edit Image dialogue box, under the General tab, add an Image Description and Title. The Image Description will be used as a the caption for the large version of the image. Title can be the name of the file itself. Now select the Appearance tab.

Enter the details exactly as shown here (this will keep the look of the site nice and consistent). What we've done is told the image to be inserted into the text on the right hand side, size as per the the thumbnail you generated with some horizontal space between it and the words, and with a black border.

The important section is the Class selection. Setting this to to Image Trigger means that the small thumbnail will open the large image in its own nice frame floating in front of the web page.

Click Insert and you'll be back in the content creation section, with your image in place.

Nearly done now...

Link to the Larger Image

With your thumbnail image now in place, we just need to tell the system what is to happen when a user clicks on it. On Delphwynd.net we are using a 'Lightbox' system to view larger versions of images, which opens a fancy new expanding window in the web browser to view the full size image you uploaded.

Make sure you select your thumbnail image in the Body area (you'll see the adjustment handles around its edges as in the image above), then click on the Insert/Edit Link button [1]

Another dialogue box opens. Click again on the small icon to the right of the Link URL box.

This time, select the large version of your image, then click on Send to TinyMCE.

Enter a Title (can be just the name of the image) and click the Update button.

Check it all works

Now you're back in the Editor and all you need to do is check that all is working as it should. Click the Preview button and then click on one of the the thumbnails of the image. It should open up nicely in its own centred window over the top of the webpage, as above.

If this works, you're done. Click Save, and your page is now available to all the other site visitors.

Phewww....