quarto-ext / lightbox

Create lightbox treatments for images in your HTML documents.
https://quarto-ext.github.io/lightbox/
MIT License
76 stars 4 forks source link

Allow to set image attributes by chunk options #13

Closed cderv closed 2 years ago

cderv commented 2 years ago

This is a proof of concept of how we can use chunk option to configure lightbox individually for plots.

Basically, we leverage the fact that we pass chunk option untouched and encoded to JSON to our .cell div.

Here I am proposing this syntax

```{r}
#| fig-cap: R plot
#| lightbox:
#|   group: r-plot
#|   description: This description is never shown
plot(1:10, rnorm(10))


so that we get chunk options namespaced by extension. 

The filter is quite simple: 

* After reading the Meta, we process the Div of class `cell` which have an attribute `lightbox` sets.
* Options are processed to either set classes or attributes in images inside the Div. 
* The rest of the filter will apply on the images that have the attributes and class correctly set by computation chunk

Currently for this POC I did not dealt with several images per chunk and added a warning. We can probably do the same; 

What do you think @dragonstyle ? 
dragonstyle commented 2 years ago

I really like this and think its worth going all the way with multi image support (it will be awesome to be able to make a gallery out of multiple figure outputs). I think the nested syntax is a great to deal with namespace / conflicts and reads well too...

cderv commented 2 years ago

Cool ! I will give a try to the multiple image in chunk then.

I'll share the PR for feedback on the syntax with the others, before we merge this and decide on the syntax

dragonstyle commented 2 years ago

Sounds great, thanks for pursuing this I think it is a big improvement and will make lightbox really useful with code cells, which is awesome!

cderv commented 2 years ago

@dragonstyle I have added support for multiple now.

This works

```{r}
#| fig-cap: 
#|   - Caption for first plot
#|   - Caption for second plot
#| lightbox: 
#|   group: cars
#|   description: 
#|     - This is the decription for first graph
#|     - This is the decription for second graph
plot(mtcars)
plot(cars)
dragonstyle commented 2 years ago

This is really great!