Attaching images and documents

Contents

Adding files
Duplicate files
Displaying media online
Linked to specific pages
Adding thumbnail images
Editing Course Hero Images in onCourse
Tagging images
Rich text
{image}
{attachment}
{video}

Adding files

onCourse provides an effortless way to display images and documents (for example JPG, PNG, GIF and PDF files) with your website. Within onCourse add attachment by the Resource menu and creating a new Attachment record. Using this tool you can upload pictures and other attachments. There is a limit of 10Mb for any file you try to upload in this way. Larger files, such as video, are better hosted with specialised services such as YouTube.

Alternatively, you can upload or link attachments directly from the edit view inside Course, Class, Tutor, Student, Site or many other places within onCourse. This links the attachment directly to that resource.

Note

Once an attachment is uploaded via the Resources menu of onCourse, you can preview an image file by double clicking on any attachment entry in the list view. PDF documents are not able to be previewed via this method.

Duplicate files

onCourse is clever enough to de-duplicate files when you upload them. So if you add a 1Mb PDF to the system and then sometime later upload the same file again to onCourse, only one copy will be stored and linked to both places. This reduces the size of your database. In order for this to work, the two files must be absolutely identical. The slightest difference and the two files will be both stored.

Displaying media online

If you wish to display attachments and images on your website, firstly make sure that you have ticked the "available on web" option for that attachment inside onCourse. Then you have several ways of showing content online, depending on where you want to display it.

Linked to specific pages

If you attach a file to a course and mark it as 'available on web' that attachment will be shown on the course description page. This makes it very simple to add pictures or perhaps a PDF with further course information. Remember that Google and other search engines will not do a good job with indexing content in Word, PDF or other formats. So if you want the best exposure online and the best search engine results, put your course descriptions as text directly into the course description.

Attaching a PDF to the course can be useful for specific files such as a pre-enrolment questionnaire, additional information about course requirements, software exercise files, and so on. Including these files is achieved exactly the same way as including an image on your page... open the Course, click the Web tab and then the Plus sign to browse the files. We recommend documents are uploaded as PDF as they can be universally accessed no matter what computer the student is running.

How to attach an image to the Course page

  1. Open the Course to which you wish to add the attachment and click on the Web tab.

  2. Now simply click on the + button in the documents section and select the existing image or upload a new one.

  3. Once the data updates online, the course detail page ( /course/ABC ) will now have your new document at the bottom.

Upload an image to your course via the web page of the given course

How to attach an image to the online Tutor resume

  1. In onCourse open the Tutor to which you wish to add the attachment and click on the Notes tab.

  2. Now simply click on the + button in the documents section and select the existing image or upload a new one.

  3. Once the data updates online, the tutor page ( /tutor/123 ) will now have your new document at the bottom.

Adding thumbnail images

You have the ability to add thumbnail images to all your courses. These will appear on your website on any courses list view page, so that's any URL that contains /courses after your domain name e.g. www.acme.com.au/courses or www.acme.com.au/courses/business/computing.

Adding thumbnail images to courses

To enable this feature you will have to add the following code to the CourseItem.tml file <div t:type="ui/image" name="${courseItemModel.course.code}_1" width="pixel width" height="pixel height"></div>, just substituting the words pixel width and pixel height for the correct dimensions. So assuming the image you are adding is 200px x 200px then the code will be <div t:type="ui/image" name="${courseItemModel.course.code}_1" width="200" height="200"></div>.

Note

The CourseItem.tml file can be found in WebDAV by going to templates -> default -> CourseItem.tml.

You would then store the attached image you want to the course and making sure the pixel width and height is the same as the code in the CourseItem.tml and name them 'coursecode_1' e.g. ActingBeg_1.

Editing Course Hero Images in onCourse

You can use images you have uploaded into onCourse as hero images for a specific course. To do so, you first need to add a snippet of code to your site's CourseItem.tml file.

Note

The CourseItem.tml file can be found in WebDAV by going to templates -> default -> CourseItem.tml.

This snippet is pasted below:

 <div class="hero-image-banner">
            <div t:type="ui/image" name="${courseItemModel.course.code}_hero" class="course-img" width="275" height="183"></div>
          </div> 			
		

Open the CourseItem.tml in a text editing tool, like NotePad++ or Sublime, then copy and paste this code into the file somewhere out of the way. Ensure that you set the name of the uploaded hero image in onCourse to x_hero, where 'x' is the course code of the course the image is intended for - e.g. for a Pottery course with the course code POT001, in onCourse you'd want to name the image POT001_hero.

You can edit the height and width values, but be aware that this may result in inconsistent results if the images you upload are all different szes to begin with.

Tagging images

You have the ability to display a different hero image on each course detail page. These will appear on your website on any course detail pages e.g www.acme.com.au/course/accounting.

Tagged image displayed at the top of the Accounting course detail page

You would then create a new tag group called 'image' and a tag inside that called 'hero'

Creating a new tag group called 'image'

Once you have created this tag group and tag the next step would be to upload the images you want to tag to the document management system. More information about how you do this can be found here. Once you have done this you will have to tag each of these images to the 'hero' tag. A quick way of doing this is highlight the list of documents you want to tag in the documents list view, right click on the tag on the left side of the window and choose the option 'Add this tag to x highlighted records'.

Bulk tagging documents

To enable this feature you will have to add the following code to the CourseItem.tml file :

<t:loop source="getAttachments(courseItemModel.course)" value="attachment">
  <t:if test="hasTag(attachment, 'image/hero')">
    <div t:type="ui/image" name="attachment.name" class="course-img" width="200" height="200"></div>
  </t:if>
</t:loop>

Lastly you would go into each course you want these images to be displayed on the corresponding web page, click on the marketing tab, then on the '+' symbol in the bottom left side of the window. Once you have found the image you want to be displayed on the course detail page for this course, select the document and Save the change. Remember to make sure the pixel width and height is the same as the code in the CourseItem.tml then tag them to the tag 'hero' in the tag group 'image'.

Add the image dart to the course Accounting

Rich text

Sometimes you want to position images and attachments not just at the end of the course description, but on other pages withint your site. You may want to display an image on a regular CMS page or link to a course handbook pdf download within a block in the side margin on your site. Any rich text enabled text field within onCourse can display this content, such as:

pages
blocks
course description
tutor resume
class description
site description

{image}

You may want to attach images and other files to courses, classes, sites, rooms and tutors and have them appear on the website. Just attach the file you want in onCourse via the Training > Documents menu item, click the '+' button and upload the file or image, mark it as 'Public' via the Access dropdown box and that file will be automatically transferred and attached to your site. These files will appear by default at the bottom of the relevant page. So for instance, just attach a PDF to a course to have that document appear as a link at the bottom of the course description. Likewise, pictures will appear at the bottom of the page. If however you would like to position the image somewhere else (say, next to the relevant paragraph of text) you can do so with a special rich text entry called {image}.

Usage

{image name:"duck" align:"right" caption:"This is a duck"}

Parameters

[name]

Optional. The name of the image. If this is not given and the id is also not given, then a random image is displayed from those linked to the relevant database object. For example, if the rich text is a course description, then the random image will be one of the images linked to that course; if the rich text is a tutor profile, then the random image will be chosen from those attached to the tutor.

[id]

Optional. If you know the internal reference of the binary image object, you can use that here instead of the name. If both id and name are passed, then the name will be ignored.

[align]

[left, right, center, centre] Optional. By default, images are left aligned.

[alt]

Optional. If supplied, the image will be given this 'alt' tag which is mainly useful for accessibility purposes. That is, people with vision difficulties may have a screen reader which can read out the names of images. If this value is not supplied, the alt tag is set to the image name.

[caption]

Optional. A caption to display under the image.

[width]

Optional. Specify the width of the image in pixels as it will display on the webpage. If not supplied, the image will display at its full size.

[height]

Optional. Specify the height of the image in pixels as it will display on the webpage. If not supplied, the image will display at its full size.

[class]

Optional. A CSS class will be added to this image for styling purposes.

[link]

Optional. If supplied, this image will be made an href link to the destination you specify.

{attachment}

Link to an attachment. When you user clicks on the link, the file will be downloaded so you will want to use well accepted file formats such as PDF.

Usage

{attachment name:"course_guide"}

Parameters

name

The name of the attachment as you specified it in the onCourse attachment entry screen.

{video}

Embed a video on your page. You will not upload the video directly to onCourse, but instead use a third party service like YouTube - their servers are optimised for video delivery and the performance and tools more helpful.

Usage

{video type:"youtube" id:"youtube_id" height:"400" width:"600"}

Parameters

type

Currently only "youtube" is supported.

id

This is the remote id of the video. For example, a youtube video which has a URL of http://www.youtube.com/watch?v=YGwtEzZPb7M would have an id of 'YGwtEzZPb7M'

[height]

The height in pixels you want to force the video to. If you leave this option out, it will default to the standard player size.

[width]

The width in pixels you want to force the video to. If you leave this option out, it will default to the standard player size.