lightbox on results="asis" chunk cause image don't use lightbox functionality

[pipaber]

Bug description

Hi!

I'm rendering tabsets automatically with a for loop inside a function. The problem is that the images rendered by this for loop doesn't have the lightbox functionality. Also, when using the symbol #| inside the chunk the image(s) dissapears.

Steps to reproduce

---
title: "Bug"
author: "Piero Palacios""
date: last-modified
format: 
  html:
    self-contained: true
    code-fold: show
    code-summary: "Show the code"
    code-overflow: wrap
    code-tools: true
    code-block-border-left: "#FDCE75"
    smooth-scroll: true
appendix-style: default
editor: visual
toc: true
df-print: kable
lightbox: true
---

```{r}
#| include: false

library(knitr)

knitr::opts_chunk$set(
  warning = FALSE,
  message = FALSE,
  dpi = 180,
  fig.width = 16,
  fig.height = 9,
  echo = TRUE
)

library(tidyverse)
library(gt)

theme_set(theme_minimal())
```


```{r}
plot_percentage_column <- function(data, columns) {
  # Recorre las columnas especificadas
  for (col in columns) {
    
    cat("\n\n###", col, "\n\n")
    
    # Genera el gráfico para cada columna
    p <- data |>
      count(!!sym(col), sort = TRUE) |>
      na.omit() |> 
      mutate(perc = round(100 * n / sum(n), 2)) |>
      mutate(!!sym(col) := as_factor(!!sym(col))) |>
      mutate(
        !!sym(col) := case_when(
          !!sym(col) == "1" ~ "Si",
          !!sym(col) == "0" ~ "No",
          .default = "No aplica"
        )
      ) |>
      ggplot(aes(
        perc,
        reorder(!!sym(col), perc),
        fill = !!sym(col),
        label = perc
      )) +
      geom_col() +
      geom_label(fill = "white") +
      paletteer::scale_fill_paletteer_d("lisa::OskarSchlemmer") +
      labs(y = "", x = "Percentage")
    

    print(p)
  }
}
```

## Example

:::{.panel-tabset}

```{r results='asis'}
plot_percentage_column(mtcars,colnames(mtcars))
```

:::

Expected behavior

Click on images should show the lightbox functionallity even if these images are generated by a for loop.

Actual behavior

Click on images doesn't show the lightbox functionallity.

Your environment

• IDE: RStudio 2024.09.0+375 "Cranberry Hibiscus" Release (c8fc7aee6dc218d5687553f9041c6b1e5ea268ff, 2024-09-16) for windows
  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2024.09.0+375 Chrome/124.0.6367.243 Electron/30.4.0 Safari/537.36, Quarto 1.5.56 (C:/Program Files/Quarto/bin/quarto.exe)

Quarto check output

$ quarto check
Quarto 1.5.57
[>] Checking versions of quarto binary dependencies...
Pandoc version 3.2.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.41.0: OK
Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
Version: 1.5.57
Path: C:\Users\pieropalacios\AppData\Local\Apps\Quarto\bin
CodePage: 1252

[>] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)

[>] Checking LaTeX....................OK
Tex: (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
Version: 3.12.4 (Conda)
Path: C:/Users/pieropalacios/AppData/Local/miniconda3/python.exe
Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with conda install jupyter

[>] Checking R installation...........OK
Version: 4.4.1
Path: C:/PROGRA1/R/R-441.1
LibPaths:
- C:/Users/pieropalacios/AppData/Local/R/win-library/4.4
- C:/Program Files/R/R-4.4.1/library
knitr: 1.48
rmarkdown: 2.28

[>] Checking Knitr engine render......OK

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs as explained in the issue template? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

Additionally, please keep your example small by removing everything not useful and/or related to the issue, i.e., are all the options and all that code really needed/required? plot(1) is not enough?

Note also that your code emits mixed content: images and markdown.
When using knitr and in these situations, you need to use knitr::knit_child().

[pipaber]

Hi, I deleted some innecesary code and some sections of the yml header. Also added the ````qmd lines. For the knit_child(), can you expand more on this? Where this should be placed?

[mcanouil]

There is extensive documentation about this knitr feature: https://bookdown.org/yihui/rmarkdown-cookbook/child-document.html

Also several discussions here on GitHun using it.

[pipaber]

Ohhh okay I get it, I've done this before. Let me try it to see if the lightbox feature works. Thanks!