working with <img> tags in nbsphinx

[phaustin]

(all figures below were created from https://github.com/phaustin/nbsphinx_issue/tree/issue)

• jupyter nbconvert is able to produce pretty good-looking html files
  from notebooks using scaled <img> elements, e.g.

  • https://github.com/phaustin/nbsphinx_issue/blob/issue/python/img_fig_eq.py#L43
    is converted to:

    https://clouds.eos.ubc.ca/~phil/github/nbsphinx/nbconvert/img_fig_eq_nbconvert.html

• nbsphinx workinng on the same notebook omits the image:

  • https://clouds.eos.ubc.ca/~phil/github/nbsphinx/img_fig_eq.html

    but does work when I use a markdown image tag with a width attribute:

    https://github.com/phaustin/nbsphinx_issue/blob/issue/python/md_fig_eq_aligh.py#L44

    produces: https://clouds.eos.ubc.ca/~phil/github/nbsphinx/md_fig_eq_aligh.html

Since jupyter notebooks ignore attributes like width, height for markdown images, at the moment I'm
producing two versions of each notebook: one for jupyter ipynb files with <img> tags
and one for html nbsphinx conversion with ![altfig]() markdown tags.

Is there a way to get nbsphinx to handle img tags the way that nbconvert does?

[mgeier]

What does nbconvert do when you convert your notebook to LaTeX/PDF?

Both nbconvert and nbsphinx use pandoc to parse the Markdown text, but I guess the difference is that nbconvert converts directly to HTML (or LaTeX), while nbsphinx converts to RST first.

There may be a way to force pandoc to keep the original <img> tag, but it would most likely not work for LaTeX output.

See also #52.

[phaustin]

for future googlers -- this is the translation code I'm currently using to go back and forth between jupyter markdown and rst scaled images:

jupytext#305

[mluerig]

similar issue here - are you planning on integrating support for images as html elements soon?

[phaustin]

This should be possible soon using myst_nb. This is very close to being a drop-in replacement for nbsphinx, although stil alpha. (e.g. see /executablebooks/MyST-NB#98)

[mluerig]

ok. I tried to understand your workaround (#284 (comment)) , but I wasn't sure where that gist goes - could you elaborate?

[phaustin]

I was doing a separate step where I post-processed the notebooks and replaced the img tags with the corresponding markdown. That proved too cumbersome though, so I just started making a separate media folder with resized images. My current approach is to keep the img tags and use chrome pdf print instead of latex to produce pdf: see https://github.com/eoas-ubc/paged_trio

[mluerig]

ok thanks. I'll keep an eye out for MyST-NB

[mgeier]

@mluerig In case this is addressed to me:

are you planning on integrating support for images as html elements soon?

No, I'm not planning to work on this anytime soon.
But I'm open for contributions!

[mluerig]

I got it to work by just using markdown for images inside my html div structure to scale, center and what not.

if I have the time at some point I'll get back to you

[mgeier]

Does #438 solve this issue?

[mgeier]

I think this is solved with the latest nbsphinx release (0.7.0).

Please leave a comment if something is still missing!