Basic Figure Syntax

Figures

Quarto provides comprehensive support for figures including sizing, layout, subfigures, and accessibility features.

Basic Figure Syntax

Markdown Images

![Caption text](image.png)

With Attributes

![Caption text](image.png){width=50%}

Cross-Referenceable Figure

![Caption text](image.png){#fig-example}

See @fig-example.

Figure Attributes

Common attributes for images:

Sizing

Multiple units supported:

![](image.png){width=50%}
![](image.png){width=400px}
![](image.png){width=4in}
![](image.png){width=10cm}

Alignment

![Left aligned](image.png){fig-align="left"}
![Centered](image.png){fig-align="center"}
![Right aligned](image.png){fig-align="right"}

Alt Text for Accessibility

![Caption](image.png){fig-alt="Detailed description for screen readers"}

Alt text differs from caption - it describes the image content for accessibility.

Computational Figures

Figures generated from code use hashpipe options:

```{r}
#| label: fig-scatter
#| fig-cap: "Scatter plot showing the relationship."
#| fig-alt: "Scatter plot with positive trend."
#| fig-width: 8
#| fig-height: 6
#| fig-align: center

plot(x, y)
```

Python Example

```{python}
#| label: fig-histogram
#| fig-cap: "Distribution of values."
#| fig-width: 10
#| fig-height: 6

import matplotlib.pyplot as plt
plt.hist(data, bins=30)
plt.show()
```

Figure Options

Subfigures

Group multiple images with a shared caption:

::: {#fig-comparison layout-ncol=2}

![First image](image1.png){#fig-first}

![Second image](image2.png){#fig-second}

Comparison of two approaches.
:::

See @fig-comparison, particularly @fig-first.

From Code

```{r}
#| label: fig-panels
#| fig-cap: "Panel figure."
#| fig-subcap:
#|   - "Distribution of X"
#|   - "Distribution of Y"
#| layout-ncol: 2

hist(x)
hist(y)
```

Figure Layouts

For arranging multiple figures, use layout divs. See layout.md for full layout options.

Basic Layout

::: {layout-ncol=2}
![](image1.png)

![](image2.png)
:::

Layout Attributes

Figure Panels

For images without individual captions:

::: {#fig-panel layout-ncol=2}
![](plot1.png)

![](plot2.png)

Multiple plots in a panel.
:::

Caption Location

Document Level

fig-cap-location: top

Per Figure

```{r}
#| label: fig-example
#| fig-cap: "Caption on top."
#| fig-cap-location: top

plot(1:10)
```

Options: top, bottom, margin.

Lightbox

Enable click-to-zoom for images (HTML only):

![](image.png){.lightbox}

Or for a group:

::: {.lightbox}
![](image1.png)

![](image2.png)
:::

Lightbox Options

![](image.png){.lightbox group="gallery" description="Detailed view"}

Enable Globally

lightbox: true

Or with options:

lightbox:
  match: auto
  effect: zoom
  loop: true

Linked Images

Make images clickable:

[![Caption](thumbnail.png)](fullsize.png)

Or link to URL:

[![Logo](logo.png)](https://example.com)

Figure Divs

For complex figure content:

::: {#fig-custom}

<iframe src="interactive.html"></iframe>

Custom interactive figure.
:::

Document Defaults

Set figure defaults in YAML:

format:
  html:
    fig-width: 8
    fig-height: 6
    fig-format: svg
    fig-dpi: 300
    fig-align: center

Resources

• Quarto Figures
• Figure Layout
• Lightbox