Images and Media

Image syntax, captions, link-wrapped images, and HTML details/summary for collapsible content.

3 min readshowcasereferenceimages

This page covers the visual building blocks: images (with and without captions), link-wrapped images, and collapsible details sections.

Basic image

The simplest form — alt text in brackets, URL in parens. The alt text is required for accessibility; treat it as the caption you'd read aloud to someone who couldn't see the image.

A wide gradient placeholder, dark blue to violet

The renderer treats markdown images as block-level when they're on their own line. Inline images (mid-sentence) small badge also work, though they're rare in long-form docs.

Image with a caption

Markdown has no native caption syntax. The convention is to put an italicised paragraph directly under the image and let the visual proximity do the work.

Three stacked cards on a dark background

A typical admin dashboard layout, with summary cards across the top and a feed below.

Wrap an image in a link to make it clickable — handy for thumbnails that open the full-size version, or for marketing images that link to a feature page.

A button-styled image saying "View pricing"

Reference-style images

For pages with many images of the same asset, reference syntax keeps the prose clean.

The BRAD logo mark

Image sizing

Markdown has no width attribute. If you need precise control over image size — for example, scaling down a screenshot — store the image at the desired display size before embedding it. Avoid inline HTML <img> tags in markdown so the source stays portable.

For app screenshots, capture at 2x the intended display size and let the browser scale them down. Sharp on retina displays, no extra markup.

Collapsible sections

Use the standard HTML <details> and <summary> tags for collapsible content. Useful for long examples, FAQ answers, or appendices you don't want crowding the main flow.

Click to expand: example response payload

A real license-verify response from the server looks like this:

{
  "status": "Active",
  "productname": "BRAD Pro",
  "productid": "12",
  "serviceid": "4218",
  "registeredname": "Acme Inc.",
  "companyname": "Acme Inc.",
  "email": "owner@acme.example",
  "regdate": "2025-01-14",
  "nextduedate": "2026-01-14",
  "billingcycle": "Annually",
  "validdomain": "acme.example",
  "validip": "203.0.113.42",
  "validdirectory": "/var/www/brad",
  "addons": "clients,sales,tickets,projects",
  "modules": ["clients", "sales", "tickets", "projects"],
  "checkdate": "2026-06-06",
  "md5hash": "a3f5e7..."
}

The md5hash field is HMAC-SHA256 despite its name — the field is kept for compatibility with older clients.

Click to expand: a longer FAQ-style answer

Q: Can I run multiple BRAD installs on one server?

Yes. Each install needs its own database and its own port, but otherwise they coexist fine. The common pattern is one Plesk subscription per install, with Plesk handling the reverse proxy and TLS termination.

Q: Does the license tie to a domain or to a server?

To both. The verify endpoint records the domain, IP, and install directory on the first check and warns you if any of them change without a corresponding update on the license. You can move a license to a new domain or server from the account dashboard — there's no charge for moves, but the old install stops verifying once the move completes.

The <details> element is plain HTML, which markdown allows. Use it when you'd otherwise need a third-party plugin for collapsible content — the native version is well-supported and accessible.

Videos and embeds

The renderer doesn't process raw HTML <iframe> or <video> tags for security. For video content, link to the hosted video instead:

If you need inline video in a doc, host the file yourself and link to it from a thumbnail using the link-wrapped image pattern above.