Jupyter-book: Rendering MyST figures in the notebook?

[sbonaretti]

Hi,

Thanks a lot for creating such a wonderful project like jupyter-book! I have just started using it and it is fantastic!

I just have a quick question about inserting figures (e.g. .png files) in Jupyter notebook and then rendering them in a book.

I need to control the size of a figure, so in the Jupyter notebook, I would write:

<img src="my_image.png" width="700" align="left"/>

but this does not render properly in the book - the following code cell is rendered very small next to the image.

From issue [#562] I can see that HTML is not recommended, and thus we should use MyST, so the command above becomes like this:
````

```{figure} ./my_image.png

height: 200px

align: left

```
````
This command nicely renders the figure in the book, but not in the notebook - I see part of the code. Is that correct?

Is there a way to use one command to render figures both in jupyter book and in jupyter notebook, when I need to control and try out figure characteristics (e.g. size)?

Thanks a lot!

[choldgraf]

Hey @sbonaretti - thanks for pointing this out, and you are right!

Currently, MyST Markdown won't work in Jupyter environments, while it doesn't work in Jupyter Book. The reverse is (sort of) true for HTML (Jupyter Book will be able to render HTML, but it will often miss many things like making sure local images are copied over properly).

I think we're currently in a middle-ground where MyST markdown only works in Jupyter Book outputs, but isn't supported in Jupyter environments themselves. The hope is that over time we can add support to these environments for MyST markdown (like figures) through extensions and things like this. But as the project is quite new, we aren't there yet :-)

I wonder if we should add a note about this in the documentation somewhere. Do you think that would be helpful?

[sbonaretti]

Thanks for replying so quickly, @choldgraf!

I think for now I will just resize the figures before inserting them, and then I will use the simple markdown command:

![](my_image.png)

And yes, I think it would be helpful to put a note in the documentation.

Thanks a lot!

[phaustin]

I've gone back and forth on whether it's better to keep mulitple versions of the same figure or multiple versions of the same notebook. Since I do a lot of notebook filtering for other reasons, I'm currenly doing the former. In case it's useful: here are a couple of rough scripts I used for resizing figures when I was using that workflow:

https://github.com/eoas-ubc/nbpython/blob/master/e340lib/img_to_md.py

https://github.com/eoas-ubc/nbpython/blob/master/e340lib/run_shrink.py

https://github.com/eoas-ubc/nbpython/blob/master/e340lib/resize_figs.py

[sbonaretti]

That's great! Thanks a lot!

[nthiery]

I got struck by the same problem today. I worked around it by forcing sphinx to
copy the image files over so that the <img src="foo/bar.jpg"> links would work. To achieve
this, I created an "assets" directory (any other name would work), reproducing
the directory structure and containing links to the relevant pictures. E.g. assets/foo/bar.jpg
is a link to foo/bar.jpg.

Then I added this:

sphinx:
  config:
    html_extra_path: ['assets']

Really just a workaround ...

[broncio123]

Hi,

How do I insert two subfigures with different captions using this syntax?
I'd appreciate any help. Thanks!

```{figure} ./my_image.png
---
height: 200px
align: left
---

```

[choldgraf]

hey @broncio123 - could you open up a new issue if you've got a question? I believe this issue is targeted for displaying figures in both myst-markdown and jupyter interfaces

[chrisjsewell]

Correct rendendering of HTML images is now possible in MyST 😄
See https://myst-parser.readthedocs.io/en/latest/using/syntax.html#images
This will be available in jupyter-book soon!

[chrisjsewell]

This should be closed in v0.8.0 😄, but feel free to re-open/open another issue if anything is outstanding: https://jupyterbook.org/reference/_changelog.html#v0-8-0-2020-09-01