Adding Media and Resources

In this lesson, you will learn how to enhance your course by adding various types of media and resources. This includes images, videos, and downloadable files that can help illustrate concepts and provide additional value to your learners.

Course Media Folder

The easiest way to add media to your course is using a _media/ folder at your course root. This keeps all your course media organized in one place.

Setting up the _media/ folder

1. Create a _media/ folder in your course directory:

   content/en/courses/your-course-name/
   ├── _index.md
   ├── _media/
   │   └── index.md
   ├── 10-getting-started/
   └── ...
   

2. Create an index.md file inside _media/ with this frontmatter:

   ---
   title: "Course Media"
   _build:
     render: never
     list: never
     publishResources: true
   ---
   

   Why is this file needed? Hugo treats a folder with an index.md as a leaf bundle — a content unit that owns its resources (images, PDFs, etc.). The _build settings tell Hugo to not render a page for this bundle (render: never), not list it alongside your lessons (list: never), but still publish the files inside it so they are available via URL (publishResources: true). Without this file, Hugo would ignore the media files entirely.

3. Drop your media files in the _media/ folder. You can place files directly in the root or optionally organize them into subfolders (e.g. by lesson name):

   _media/
   ├── index.md
   ├── course-thumbnail.png          ← shared files at root level
   ├── introduction/                  ← optional subfolder per lesson
   │   ├── image1.png
   │   └── image2.png
   ├── getting-started/
   │   ├── image1.png
   │   ├── image2.png
   │   └── cheat-sheet.pdf
   └── advanced-topics/
       └── image1.png
   

   Subfolders are entirely optional — you can keep all files flat in _media/ if you prefer. Subfolders are helpful when multiple lessons use files with the same name (e.g. image1.png).

Using media from _media/

Once set up, reference media using filenames or relative paths:

Files in root of _media/:

![Thumbnail](course-thumbnail.png)
image: course-thumbnail.png

Files in lesson subfolders:

![First image](introduction/image1.png)
![Second image](getting-started/image2.png)
[Download cheat sheet](getting-started/cheat-sheet.pdf)

The system automatically resolves these paths from your _media/ folder.

Adding Videos

Videos can be particularly useful for demonstrating processes or explaining complex concepts. Use external video hosting platforms for best performance:

Specify the video source in the front matter of your lesson. Recommended options:

---
video:
  youtube: dQw4w9WgXcQ                # YouTube video ID (recommended)
  # vimeo: 123456789                  # Vimeo video ID
  # tibav: 42061                      # TIB AV-Portal ID
  # external: https://.../video.mp4   # External video URL
  # embed: "<iframe ...></iframe>"    # Any embed code
---

The video will automatically be displayed at the top of your lesson page.

Important: Use external video platforms (YouTube, Vimeo, TIB AV-Portal) instead of storing video files in the repository.

Tip: Use the existing image field in the front matter as the video thumbnail (poster).

Adding Downloadable Resources

You can provide additional resources for your learners to download, such as PDF guides, code examples, or practice files.

1. Place files in your _media/ folder (optionally in a lesson subfolder)
2. Link with the relative path:

   [Download practice files](getting-started/practice-files.zip)
   [Download cheat sheet](getting-started/cheat-sheet.pdf)
   

Best Practices for Using Media

1. Use relevant media: Ensure that all media included directly supports your lesson content.
2. Optimize file sizes: Large files can slow down page load times. Compress images and videos wherever possible.
3. Provide alternative text: Always include descriptive alternative text for images to improve accessibility.
4. Balanced use of media: While media can enhance learning, avoid overuse. Find a balance between text and media content.

Exercise: Enhance Your Lesson with Media

1. Add at least one image to the lesson you wrote in the previous exercise.
2. If applicable, include a short video demonstration in your lesson.
3. Create a simple downloadable resource (e.g., a PDF cheat sheet) and add a link to it in your lesson.

In the next lesson, we will cover how to preview and test your course locally before submitting it.