Images Cheat Sheet

These patterns work with the Besso brand snippets.

Standard image

![[your-image.jpg]]

Use this for a normal embedded image with the default brand styling.

Figure with caption

> [!figure] This becomes the caption
> ![[your-image.jpg]]

Best option when you want a visible caption under the image.

Caption after an image

![[your-image.jpg]]
> [!caption]
> A concise explanation of what the image shows and why it matters.

For published articles, the image and immediately following caption callout become a semantic HTML <figure> with a <figcaption>. Use this form when the image should appear first in Obsidian.

Banner image

> [!banner] Strategy Offsite
> ![[your-banner.jpg]]

Good for a shallow, wide image section near the top of a note.

Hero image

> [!hero] Beyond Automating Bottlenecks
> ![[your-hero.jpg]]
>
> Optional supporting text goes here.

Good for a stronger opening section with both image and text.

Image card

> [!card] Field Notes
> ![[your-image.jpg]]
>
> Short supporting copy.

Use when the image should feel like a tile in a grid or collection.

Gallery of cards

> [!cards]
> > [!card] Card One
> > ![[image-one.jpg]]
> >
> > Summary text.
>
> > [!card] Card Two
> > ![[image-two.jpg]]
> >
> > Summary text.

This is the best branded pattern for image-plus-text collections.

Side image with text wrap

Prefer a floated aside callout with an image inside:

> [!aside|right]
> ![[your-image.jpg]]
> Short note beside the image.

Left version:

> [!aside|left]
> ![[your-image.jpg]]
> Short note beside the image.

Wide note for big visuals

---
cssclasses:
  - brand-wide
---

Use brand-wide or brand-ultra when the note is image-heavy.

Good image patterns by use case

• Captioned image: figure
• Large editorial opener: hero
• Wide section divider: banner
• Image with summary: card
• Multiple image summaries: cards
• Side image with text wrap: aside|left or aside|right