Attaching images and documents to your web page

Getting content to your users with ease

How to attach images and documents

You can add images and documents to courses and tutors in your onCourse client. Add a new image or document by going to Resources -> Attachments, and clicking on “New”. You can now choose images or documents from your desktop by clicking on the “import” button. Give it a new name, put a tick in the box that says “Available on web” and click “Save”. You can now use this image in various places in onCourse.

Displaying images in web pages

After you have imported the attachment files in your onCourse client, they will automatically be transferred to the web server. You can use images in any field in onCourse where you see this symbol: which includes fields in courses, classes, tutors, sites, rooms and tags – basically, anywhere where more than a line of text from your onCourse database is visible to a student looking at your web page. For non-course web page content, you can use the admin portal on your web site (using a browser) to insert these images into your page content or add these attachment documents to the bottom of the page.

After you have added the image in the step above, you can then choose where the image appears by using the follow tags in the content of your web pages.

The web-based web content editing tool has a tool that allows you to view all your your images (not just the attached ones) and insert the first form of the image tag:

• {image id:"7"} This shows the image you selected in the image tag insertion tool.
• {image id:"7" align:"right"} Float the image to the right.

The following tags can be used in onCourse and in the web-based web content editing tool, but they are limited to the images that you have attached to that web page.

• {image} This picks a random image from the list of images attached to this web page and displays it here.
• {image name:"duck"} Display the image named “duck” from the list of attachments here. Note that the name should match the name of the attachment that you’ve added.
• {image align:"right"} Select a random image from the list of images attached to this web page and align it to the right.
• {image tag:"animals"} Display a random image from the pool of images tagged with the tag named “animals”.
• {image name:"Rubber Ducky" align:"right" title:"Quack Quack" caption:"a cute yellow duck" width:"120" link:"http://duck.com/"} A more complicated example – displays the image named “Rubber Ducky”, aligns right, gives the image the title “Quack Quack”, a caption “a cute yellow duck”, sets the width of the image to 120 pixels (and scales the height accordingly) and when a user clicks the image they’re taken to “http://duck.com”.

Displaying video in web pages

You can insert YouTube videos in the content of your web pages using the following tag. Note that the video will be served from the YouTube server, and so does not need to be attached via onCourse.

• {video type:"youtube" id:"00PPPt7EJqo"} will show the YouTube video with the given ID. You can find the ID in the “URL” box of the YouTube video.

Displaying images in course information

To attach image to a course where it will be displayed on the course info page from the website, open up the course that you wish to add the attachment to and click on the “Web” tab.

Now click on the “+” button below and select the image that you’ve added in the above section.

Attaching documents and other files to course information

You may also wish to make other course specific files available to your students to access prior to enrolment or the first session, such as a pre-enrolment questionnaire, detailed information about course assessment requirements, software exercise files for homework or a detailed class supplies checklist that can be printed and checked off. By following the instructions above, you can import these files into onCourse and attach them to the course or class records of your choice. PDF format files are recommended for documents as they can be universally accessed no matter what software the student has on their computer.