CodePress/guide/en/admin-beheerder/content-beheer.md

# Content management

CodePress uses a **tree view** (`/admin/content`) for content management: a file browser sidebar + CodeMirror editor, uniform with the plugin and theme editors. The old list/table view has been removed.

## Content editor

### File browser sidebar
- Shows the nested file tree of `content/`
- Hidden directories (`.bak`, `.git`) and dotfiles are skipped
- Click a file to open it in the CodeMirror editor
- Folders containing the active file are auto-expanded
- Per folder there are action buttons: new file, new folder, rename, delete

### Editable file types
`.md` (Markdown), `.php` (PHP), `.html` (HTML) — consistent with the existing content-edit page.

All types support `---` frontmatter (layout, created, edited, plugins). The CMS `parseMetadata()` extracts frontmatter before processing. For PHP files, frontmatter is stripped from the output.

#### PHP content files
PHP files can deliver content in two ways:
1. **Echo** (output buffering): everything `echo`ed or outside `<?php` tags is used as content
2. **Return** (callback style): `return '<h1>Hello</h1>';` — the returned string is used as content

In PHP files, the `ContentAPI` is available via `$api`:
```php
<?php
$menu = $api->getMenu();
$pages = $api->getAllPages();
$config = $api->getConfig('site_title');
return '<h1>' . htmlspecialchars($config) . '</h1>';
```

#### Frontend URLs and file names
The CMS searches files in order: `.md` → `.php` → `.html`. If files share the same name (e.g. `test.md` and `test.php`), `/nl/test` always opens `test.md`. To open a specific file type, add the extension to the URL:
- `/nl/test` → opens `test.md` (or `.php` / `.html` if `.md` doesn't exist)
- `/nl/test.php` → opens `test.php` (explicit extension)
- `/nl/test.html` → opens `test.html` (explicit extension)

The preview link in the editor automatically uses the extension for non-`.md` files.

### Set image size (Markdown)
The markdown editor toolbar has an "Image size" button (expand icon):
1. Select an image in the editor in markdown format `![alt](url)`
2. Click the "Image size" button
3. Enter width and/or height (px or %, empty = don't set)
4. The `{:width=... height=...}` syntax is added to or replaced on the image

Example:
```markdown
![logo](/content/_images/logo.png){:width="200" height="100"}
```

Existing `{:width=...}` values are shown in the prompts. The size attributes are rendered as `width`/`height` HTML attributes on the `<img>` tag in the frontend.

### Images in content
Images in `content/` are served via the `/-media/` endpoint (content/ lives outside the webroot). Markdown syntax `![alt](url)` with local URLs (relative like `image.jpg`, or absolute like `/content/_images/image.jpg`) is automatically rewritten to `/-media/...`. External URLs (`https://...`) are left untouched.

### Create a new file
- Click **New file** (at the top or per folder in the sidebar)
- Enter a path within content (e.g. `en.page` or `blog/en.post`)
- Choose the file type (Markdown/PHP/HTML)
- Subfolders are created automatically
- Frontmatter with `layout`, `created`, `edited` is auto-generated

### Upload a file
- Click **Upload** to upload files to `content/`
- Allowed: images, video, audio, PDF, ZIP, office docs, CSS, SCSS, JS, JSON, HTML, MD
- Path-traversal protection: target dir must stay within `content/`

### Move / delete a file
- In the file tree each file has a move button (arrows icon) and a delete button (trash)
- **Move**: choose a target folder from the dropdown listing all folders in content
- **Delete**: with confirmation

### Folder management
- **New folder**: per folder in the sidebar or at the top
- **Rename folder**: pencil icon per folder
- **Delete folder**: trash icon per folder (only empty folders)

### Layout selection
On the editor page you can choose the layout from the layouts defined in `theme.json` (template mapping). The selected layout is stored in the frontmatter `layout:` key.

### Plugins on pages
- Only active **content plugins** (from `plugin.json` with `type: "content"`) appear in the plugin multiselect; system plugins (like Statistics/Logs/Dashboard) are excluded
- Choose which plugins run on the page via the multiselect (use Ctrl/Cmd+click for multiple)
- The plugin selection is stored in the frontmatter `plugins:` key

### Backup integration
At the top of the content editor there is a **Backup** button linking to the backup page (`/admin/content-backup`) for ZIP backup/restore and (if available) git versioning. Git integration in the editor sidebar has been removed; git will become a system plugin later.

### Frontmatter

The editor shows the **Created** and **Edited** timestamps (read-only, automatically updated on every save). The `edited:` value is refreshed on each save.

```markdown
---
layout: left_sidebar
created: 2026-08-19 10:30:25
edited: 2026-08-20 14:22:01
plugins: HTMLBlock, Navigation
---

# Page title

Content...
```

## Frontmatter

The editor updates the frontmatter live when layout or plugin selection changes:

```markdown
---
layout: left_sidebar
created: 2026-08-19 10:30:25
edited: 2026-08-20 14:22:01
plugins: HTMLBlock, Navigation
---

# Page title

Content...
```