Linked figure with linked caption in quarto (html) book?

[ElineVG]

Is it possible to have a linked figure (i.e., a figure linking to an external site if you click it) with a figure caption that also contains an external link? How could I achieve that?

I tried the following approaches, but they did not give the expected result:

Approach 1:
[![This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.](elephant.png){#fig-elephant}](https://en.wikipedia.org/wiki/Elephant)

In this approach, the linked figure works, but the link in the caption shows as follows: "[a webpage](https://en.wikipedia.org/wiki/Elephant)".

Approach 2:
[![This caption includes a link to <a src="https://en.wikipedia.org/wiki/Elephant">a webpage</a>. Also, click the image to try out the application.](elephant.png){#fig-elephant}](https://en.wikipedia.org/wiki/Elephant)

In this second approach, the linked figure works, and the link in the caption shows as a link. However, the link in the caption does not link to the external page, but to itself (= the page on which the link stands).

Do you have any idea how I could make this work?

Thank you very much in advance!

[mcanouil]

You need to use a fenced div (see https://quarto.org/docs/authoring/figures.html#figure-divs) which is better for long caption in my opinion.

---
format: html
---

::: {#fig-elephant}
[![](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg)](https://en.wikipedia.org/wiki/Elephant)

This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.
:::

[mcanouil]

Do you have a small Quarto document exhibiting what you try to do (as in my initial answer)?

[ElineVG]

Here you go (issue occurs for pdf book):

---
format: pdf
---

::: {#fig-elephant}

#| fig-align: "center"
#| out-width: "100%"
knitr::include_graphics("figs/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg")

This caption includes a link to a webpage. Also, click the image to try out the application.
:::

If the image could be linked to an external url on top, that would even be better.

[mcanouil]

There is no need for fenced div here.
Code cells have options to do this directly, see https://quarto.org/docs/authoring/figures.html.

The tricky part is to add an hyperlink to the image.

---
format: pdf
---

```{r}
#| label: fig-elephant2
#| fig-cap: This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.
plot(1)
```

[ElineVG]

Adding the figure caption in the chunk is indeed what I did, but as you indicate, then I do not know how to make a linked image possible.

[mcanouil]

@cderv Do you think of a "simple" solution to add an hyperlink to figure generated in a code cell?
I can only think of using a hook to process the output, although I am not quite sure where to intervene to get the path, include figure, add URL as markdown.

Below a work in progress hook which does not give exactly the desired output, i.e., I currently do not know how to get rid of .cell-output-display fenced div and or intervene at figure path.

---
format: html
keep-md: true
---

```{r}
default_plot_hook <- knitr::knit_hooks$get("plot")
knitr::knit_hooks$set(plot = function(x, options) {
  if (is.null(options[["url"]])) {
    default_plot_hook(x, options)
  } else {
    sprintf("[%s](%s)", default_plot_hook(x, options), options[["url"]])
  }
})
```

```{r}
#| label: fig-elephant
#| fig-cap: This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.
#| url: https://en.wikipedia.org/wiki/Elephant
plot(1)
```

I've got a in the middle ...

---
format: html
keep-md: true
---


::: {.cell}

:::

::: {.cell url='https://en.wikipedia.org/wiki/Elephant'}
[::: {.cell-output-display}
![This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.](demo_files/figure-html/fig-elephant-1.png){#fig-elephant width=672}
:::

](https://en.wikipedia.org/wiki/Elephant)
:::

---

An attempt for an "external" image

---
format: html
keep-md: true
---

```{r}
#| echo: false
#| label: fig-elephant
#| fig-cap: This caption includes a link to [a webpage](https://en.wikipedia.org/wiki/Elephant). Also, click the image to try out the application.

cat(sprintf(
  "[%s](https://en.wikipedia.org/wiki/Elephant)",
  knitr::knit_child(
    text = knitr::knit_child(
      text = c(
        "```{r}",
        "#| echo: false",
        "#| output: asis",
        
'knitr::include_graphics("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg")',
        "```"
      )
    ),
    quiet = TRUE
  )
))
```

[

::: {.cell-output-display}
![](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Elephant_Diversity.jpg/1920px-Elephant_Diversity.jpg)
:::](https://en.wikipedia.org/wiki/Elephant)