Can figures be arranged in order that they are referenced in text?

[charliecornwallis]

Description

---
title: "Figure order"
format: html
---

# Main text
This is my main text where I reference the first figure, @fig-cars, and a second figure, @fig-air.

Is it possible for the figures below to be presented in the order they are referenced - cars then air - rather than the order of code - air then cars?

# Figures

::: {#fig-air}

```{r}
#| echo: false
#| message: false 
#| warning: false
#| class: output

library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")

```
Airquality
::: 


::: {#fig-cars}

```{r}
#| echo: false
#| message: false 
#| warning: false
#| class: output

ggplot(cars, aes(speed, dist)) + 
  geom_point() + 
  geom_smooth(method = "loess")

```
Cars
::: 

The end.

[mcanouil]

Yes, you need to write a LUA filter to do that.

https://quarto.org/docs/extensions/

PS: mostly for accessibility, could you add actual text, like the question inside your post? Assistive devices won't get anything but a "description" followed by a long code block almost out of context.

[mcanouil]

Contents shortcode is to move code cells.
So use label and fig-cap as code cell options.

[charliecornwallis]

Using label and fig-cap options still doesn't work (e.g. output of fig-cars not present where {{< contents fig-cars >}} is placed). Also in the contents information (https://quarto.org/docs/authoring/contents.html) it says that divs can by used "also works with any document divs or spans".

[mcanouil]

Thanks, I need to check this shortcode, but there might be a bug or a limitation for cross-reference elements.

[mcanouil]

As a workaround you can surround your figure with another div.

[mcanouil]

FYI:

• Contents shortcode does not work on code-cell div with knitr #12065

[charliecornwallis]

Really appreciate you continuing to look into this! That workaround didn't work for me, but perhaps I specified it in the wrong way. Could you provide an example of what you mean? Thanks very much.

…

________________________________ From: Mickaël Canouil ***@***.***> Sent: 11 February 2025 20:24 To: quarto-dev/quarto-cli ***@***.***> Cc: Charlie Cornwallis ***@***.***>; Author ***@***.***> Subject: Re: [quarto-dev/quarto-cli] Can figures be arranged in order that they are referenced in text? (Discussion #12034) As a workaround you can surround your figure with another div. — Reply to this email directly, view it on GitHub<#12034 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOJ2IEQPK6FU3MGVSNVAJ232PJE65AVCNFSM6AAAAABWS6Y7SOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJVGA4DEMQ>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[mcanouil]

What di you try? did you add an extra Div around with an ID?

[charliecornwallis]

Yes. For example: ```` ::: {#fig-cars } ::: ```{r} #| echo: false #| message: false #| warning: false ggplot(cars, aes(speed, dist)) + geom_point() + geom_smooth(method = "loess") ``` Cars ::: ::: ````

…

________________________________ From: Mickaël Canouil ***@***.***> Sent: 12 February 2025 11:11 To: quarto-dev/quarto-cli ***@***.***> Cc: Charlie Cornwallis ***@***.***>; Author ***@***.***> Subject: Re: [quarto-dev/quarto-cli] Can figures be arranged in order that they are referenced in text? (Discussion #12034) What di you try? did you add an extra Div around with an ID? — Reply to this email directly, view it on GitHub<#12034 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOJ2IEWOCAM5XOHIAYMFMRD2PMM3ZAVCNFSM6AAAAABWS6Y7SOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJWG43TIMA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[mcanouil]

Avoid replying by email, this leads to a really poorly formatted message.

Why di you move the fig- used for cross-reference, I said to surround your Div with an extra one.

:::: {#whatever}

::: {#fig-my-real-div}
...
:::

::::

{{< contents whatever >}}

[charliecornwallis]

This still only produces figures under the figure code heading, not where contents are specified. Figure numbers also represent the order that code appears, not the order of contents appearance:

## Figures

{{< contents fig-cars >}}

{{< contents fig-air >}}

# Figure code

:::: {#fig-air}

::: {#a}

```{r}
#| echo: false
#| message: false 
#| warning: false

library(ggplot2)
ggplot(airquality, aes(Temp, Ozone)) + 
  geom_point() + 
  geom_smooth(method = "loess")

```
Airquality

:::

:::: 

:::: {#fig-cars}

::: {#b}  

```{r}
#| echo: false
#| message: false 
#| warning: false

ggplot(cars, aes(speed, dist)) + 
  geom_point() + 
  geom_smooth(method = "loess")

```
Cars

::: 

:::: 

[mcanouil]

As i said and illustrated, the extra Div is outside not inside the div with fig- ID used for cross-reference.

[charliecornwallis]

Sorry, I get it now. I had tried the way you suggested first but had used {{< contents fig-whatever >}} which doesn't work. Removing the fig- solves it, thanks for the work around.