SWAMPy

✎ CARVE FLESH

EDITING: adding-images.md

---
layout: docs
title: "Adding images"
date: 2020-02-04T09:40:32+01:00
draft: false
weight: 2
---

## Images

Images that need to be show in the component library should be placed in a separate folder for each new page.

The Markdown file for this page is located here:

```
└── content
     └── moodle
         └── getting-started
            └── adding-images.md
```

To access images for this page create a new folder here.

```
└── static
     └── moodle
         └── getting-started
            └── adding-images
```

Place your images in this new folder:

```
└── static
     └── moodle
         └── getting-started
            └── adding-images
                ├── wildebeest-1200.jpg
                ├── kitten1.png
                └── kitten2.png
```

To use images use this syntax:

Syntax for markdown (.md) files:

```
{{</* image "wildebeest-1200.jpg" "Image of a Wildebeest" "img-fluid" */>}}
```

Rendered result on this page:

{{< image "wildebeest-1200.jpg" "Image of a Wildebeest" "img-fluid">}}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 _index.md	MD	86 B	2026-02-11 01:44	EDIT
📄 adding-images.md	MD	1.1 KB	2026-02-11 01:44	EDIT
📄 adding-pages.md	MD	2.2 KB	2026-02-11 01:44	EDIT
📄 component-library-backend.md	MD	2.1 KB	2026-02-11 01:44	EDIT
📄 example-files.md	MD	2.4 KB	2026-02-11 01:44	EDIT
📄 getting-started.md	MD	1.6 KB	2026-02-11 01:44	EDIT
📄 moodle-javascript.md	MD	1.2 KB	2026-02-11 01:44	EDIT
📄 moodle-templates.md	MD	1.4 KB	2026-02-11 01:44	EDIT
📄 syntax-highlighting.md	MD	2 KB	2026-02-11 01:44	EDIT