Margin figure, caption and references

[fredguth]

How do I add a figure in the margin so that it says something like "Figure 1: Caption text".

I tried:

::: {.column-margin}
![Richard Feynman, Nobel laureate physicist.](feynman.pdf){#fig:feynman}
:::

Pandoc created:
[1]: #fig:feynman {reference-type="ref" reference="fig:feynman"}

Another point...
My figure is 3x4, but it is showing like if it was cropped... see: https://fredguth.github.io/ffc/blog/posts/dissertation/intro.html

[fredguth]

Noticed that if I change the pdf figure to a png, it doesn't crop anymore. 🤔

[dragonstyle]

1. use fig- rather than fig: - for example #fig-feynman should do it.

2. As far as size, I think the issue is that when you are embedding the PDF figure in the HTML output, it is actually hosting a PDF viewer in the sidebar (with the chrome and other behavior that goes with that). I'm not sure how the width and height for the viewer is determined - since it is a full PDF viewer, it doesn't size itself to the size of its contents (since PDF documents are often multipage scrolling documents). Using a web native image format for HTML is probably desirable if possible.

[dragonstyle]

(very nice looking blog / site BTW!)

[fredguth]

Thanks 😊
I used fig: in my tex files. I believe when pandoc converted it to md, it just kept the label. The reason I didn't change was because I didn't understand what pandoc did and was afraid to change.

It converted references like:

See \cref{fig:termite_cathedral}, termites self-cooling mounds

to

See [\[fig:termite_cathedral\]][4]
....
(in the end of the file)
  [4]: #fig:termite_cathedral {reference-type="ref" reference="fig:termite_cathedral"}

I didn 't understand what pandoc did here to know how should I change it to the quarto convention.

[dragonstyle]

For Quarto documents, we have a pretty straightforward approach to cross references (and it is well supported in tools like RStudio or VSCode using the Quarto extension). You can basically label images or other figures with an id fig-<something> and then later in text, reference that with @fig-<something> and we'll automatically generate the cross reference. We support this for the types of things you'd generally expect- you can read more here:

https://quarto.org/docs/authoring/cross-references.html

We do key some of our behavior based upon whether then elements have a fig- or tbl- id (and so on) so you'll see better results in Quarto using these results.

[fredguth]

Find and replacing all fig: text to fig- changed the layout for figures in the margin:
See: https://share.getcloudapp.com/E0uZoodE

Either it has the label and show properly "Figure 1" but the image is too big for margin; or the figure has no label and no "Figure" in the caption.

[fredguth]

Where I put {#fig-cool width=100px} ?

[dragonstyle]

That makes sense. FWIW here is the documentation on figures which mostly focuses on standard markdown figure syntax:

https://quarto.org/docs/authoring/figures.html

In this case it should look like:

![<caption text>](<fig-url>){#fig-<id> width=100px}

You may also place classes on this figure like so:

![<caption text>](<fig-url>){#fig-<id> width=100px .<classname>}

So might look like:

![A spectacular elephant](elephant.png){#fig-elephant width=100px .column-margin}

[fredguth]

Ok, I think I understand what is happening. I changed all figures according to this suggestion but with some caveats....
I am using nbdev_preview (which I understand as quarto preview in disguise).

In nbdev_preview this is what happens (notice that my _quarto.yml has reference-location: margin):
https://share.getcloudapp.com/d5unNJWQ

But in production, it works see: https://fredguth.github.io/ffc/blog/posts/dissertation/ai.html

It seems to be a quarto preview problem. But I am not sure if it is just a nbdev thing.

I will try creating a new quarto project and test without nvdev to see if the same thing happens with quarto preview without nbdev.

[fredguth]

It is a nbdev only problem. Thanks a lot!

[dragonstyle]

OK good to know - thank you!