The Idea Loft

Media Embed Format

This page documents the media embed format used by the Family Tree wiki to display images inside pages.

Media embeds are generated automatically by the editor when you insert images using the image picker. In most cases, you do not need to edit or write these tags manually.

What is a media embed?

A media embed is a structured tag stored in the wiki content that tells the system which image to display and how it should be rendered.

Instead of embedding raw image URLs, the wiki uses this format to ensure images:

• Remain reusable across multiple pages
• Resize correctly on different devices
• Respect the group’s shared media model
• Remain stable if underlying URLs change

Media embed syntax

A typical media embed looks like this:

[[media id="db56735f-9425-43fd-8327-714e94609dec" w="800" fit="max" caption="true"]]

This tag is processed by the wiki and rendered as an image when the page is viewed.

Attribute reference

id (required)

id="db56735f-9425-43fd-8327-714e94609dec"

• The unique identifier of the image in the group media collection
• Determines exactly which image is displayed
• Should never be edited manually

w (width)

w="800"

• The maximum display width of the image in pixels
• The image will scale down automatically on smaller screens
• Common values:
  • 400 – small or inline image
  • 600–800 – standard article image
  • 1000+ – large or featured image

fit (resize behaviour)

fit="max"

Controls how the image is resized within the given width.

• max – scale down to fit, never crop (recommended)
• contain – fit the entire image within bounds
• cover – fill the area, may crop edges

Most wiki images should use fit="max".

caption (display caption)

caption="true"

• true – displays the image caption below the image (if one exists)
• false – hides the caption

Captions are recommended when context or identification matters.

Example usage

Standard article image

[[media id="…" w="800" fit="max" caption="true"]]

Small inline image

[[media id="…" w="400" fit="max" caption="false"]]

Large featured image

[[media id="…" w="1200" fit="max" caption="true"]]

Important rules

• ✅ Media embeds are generated by the image picker
• ❌ Do not invent media tags
• ❌ Do not change image IDs manually
• ❌ Do not copy media embeds between unrelated groups

If an image does not display correctly, the safest solution is always to:

Remove the embed and re-insert the image using the image picker.

Why this format exists

The media embed format allows the wiki to treat images as structured content rather than static files.

This makes pages more reliable, easier to maintain, and more adaptable as the platform evolves.