Media files like images and PDFs can be stored in the top level
media/directory. Only store files here that you intend content editors to be able to change. This folder hooks into the CMS in order to provide a media browser that can be manipulated through the admin interface.
Accessing media in Layouts
In general you want to reference media in your JSON content and then access it from the
contentprop to display it in your template in a dynamic way that can be changed by editors. You could reference these assets directly from your templates (e.g.
<img src="/media/my-image.jpg" />) or use a relative path (e.g. if you were adding an image to
layouts/components/my-component.svelte, you could reference the same image like
<img src="../../media/my-image.jpg" />). However, if your intention is to hardcode an asset in your template that editors can't change, you'd be better served using the top-level
Media BrowserWhen referencing assets in your JSON content source, you should use the full path (e.g.
media/path/to/file.jpg) instead of just the filename and then hardcoding the prefex and suffix in your template. This allows the Plenti CMS to recognize the file as an asset and gives you a widget for interacting with the Media Browser to change assetsor upload new ones.
The nested folder structure you use inside your top-level assets folder becomes the filtering mechanism of the Media Browser. This can be used for narrowing down results in the Library view or setting the path of new files in the Upload view. Note that only folders with a file inside of them will appear this way (similar to how Git doesn't tracking empty folders).