Skip to main content

Images

Images are added with the img: element inside a page section or column.

Three ways to reference an image​

1. Keyword — Unsplash search​

Provide a word or short phrase and Micropage searches Unsplash for a matching photo:

img: <- coffee

This is useful for quickly prototyping pages without uploading anything.

2. Uploaded file — project asset​

Reference a file you have uploaded to the project by its exact filename:

img: <- hero.png
img: <- logo.svg

The file must already exist in the project. Filenames are case-sensitive.

3. Direct URL — downloaded and stored​

Provide a full https:// URL and Micropage downloads the file and stores it in the project:

img: <- https://example.com/screenshot.png

The file is fetched once and saved, so subsequent builds use the stored copy.

Using images in a section​

Images can appear directly in a section or inside a column:

/// section

col:
  img: <- product-screenshot.png
  h3: Simple editor
  p: Write markup, see the result live.

col:
  img: <- team
  h3: Built by developers
  p: For developers who ship fast.

In the Web App​

Upload a file in the Files tab, then reference it in the editor with img: <- filename. For keyword or URL images, write the img: line directly — no upload needed.

Notes​

  • Files resolved from keywords or URLs are saved to the project file store automatically.
  • Deleting a stored file that is referenced in markup will cause a broken image after the next build.
  • To see which files are stored in a project, use the Files tab in the Web App or micropage files list from the CLI.