Skip to content
Docs
Images

Images

Three ways to put a picture inside a post body, with a credit and an explicit AI status.

Plain Markdown

A relative path is optimised at build time and gets the prose border/radius. It carries no caption or credit, so the build warns and nudges you to <Figure>:

![A soft gradient](./sample.jpg)

<Figure> — caption, credit, AI status

.mdx posts can use components. Every <Figure> takes a credit (rights holder / source) and an ai flag; caption is optional. ai={true} shows an “AI” badge, ai={false} shows nothing extra. Add wide to spill past the reading column.

import Figure from "astro-blog-theme/components/Figure.astro";
import shot from "./shot.png";

<Figure
  src={shot}
  alt="…"
  caption="What the reader is looking at."
  credit="© 2026 Your Name"
  creditHref="https://example.com"
  ai={false}
/>
credit and ai are required — the build warns when either is missing. Set imageCredits: false in the integration options to silence the Plain-Markdown warning globally.

Raw <Image>

For full control, use astro:assets directly (no caption/credit affordance):

<Image src={shot} alt="…" width={600} />

Hero image credit

heroImage takes the same metadata via frontmatter: heroCaption, heroCredit, heroCreditHref and heroAi. The build warns if heroImage is set without heroCredit / heroAi.

heroImage: ./hero.jpg
heroAlt: "…"
heroCredit: "© 2026 Your Name"
heroAi: false
InstallationGallery