Preprocessor to embed markdown images

[juhasch]

Images in markdown ![](myimage.png) will be added as attachments to the cell.

TODO

• Test
• Documentation

[soamaven]

Just to be explicit, looks like this only embeds MD referenced images. HTML embedding still needs to be done. Glad to see the progress though :D

[soamaven]

For some reason, I cant get attachments working with my jupyter nb (v5.0.0), so I can't test some things.

Is it possible to refer to an attachment in the html? E.g.:
'<img src="data:image/png;base64,a325bd...' width="50%">
becomes
'<img src="data:image/png;base64,attachment:myimage.png.' width="50%">

if so that makes embedded images actually very nice to deal with in MD cells, and gives full html control over display.

[juhasch]

Attachments only work with markdown images. If you use base64 images in html img tags, they will be sanitized by the notebook.

So it will need to be a 2 step solution:

1. a preprocessor to embed markdown images as attachments. This allows
   jupyter nbconvert -to notebook mynotebook.ipynb --EmbedImagesPreprocessor.embed_images=True to create a copy of the notebook with embedded images.
2. an html exporter, that will embed all images.

[soamaven]

If you use base64 images in html img tags, they will be sanitized by the notebook.

Thanks, this is an important detail. When does this happen? Upon render and kernel startup?

This PR #1067 helps to embed MD images -- the htmlexporter.py didn't do this.

What I am looking to achieve is:

1. embed html AND/OR markdown images before export
2. export to slides. I want to have one presentation file I can send to collaborators that works in their browser. Very similar to how a powerpoint presentation is one file.

It seems like step one is not possible for html base64 because of sanitization, which means step 2 will fail. Is the only option to re-implement the --to slides exporter to also embedhtml images?

[juhasch]

I believe you need a new exporter to embed images and convert to slides.

Maybe @mpacer can share his thoughts what a good approach would be ?

[gabyx]

So would the goal for the export_embedded extension be that for
"Download Embedded HTML"

• call embedhtml.py exporter which uses this preprocessor first (is that possible to hook up), and afterwards replaces all remaining image tags and outputs .html

"Download Embedded Notebook"

• call exporter notebook with your preprocessor (which should also handle inside Markdown and store them as attachements)

So the path would be -> first transform the notebook to a new notebook that all images are embedded -> export to HTML

So then for the HTML export we can use the default normal HTML exporter

[gabyx]

@juhasch Could you please have a look at my branch (where I tried to use your preprocessor inside embed_html) it is called but somehow does not work, key error in self.attachements, do you know why?
Link to Commit

[juhasch]

Actually, all you need to do is copy the html_embed exporter and replace the base class:

class EmbedSlidesExporter(SlidesExporter):

And instantiate your exporter in the from_notebook_node function accordingly

    def from_notebook_node(self, nb, resources=None, **kw):
        output, resources = super(
            EmbedSlidesExporter, self).from_notebook_node(nb, resources)
...

Now, what I don't like is that we now have the code for embedding twice, so we should find a solution for that.

You don't need the preprocessor. It is useful if you want to stay in higher-level formats, i.e. notebook to notebook conversion.

[gabyx]

Bugfix:
bugfix.patch.zip

match.string is not doing what it should do, match.group(0) is the whole match, whereas
match.string is the whole line strangely....

[jcb91]

I think this should be EmbedImagesPreprocessor, no?

[gabyx]

Would say so too, its more explicit :-)

[jcb91]

its more explicit

but more importantly, at the moment I don't think EmbedPreprocessor is an extant class, so I don't think it'll produce anything at all...

[jcb91]

So where is this sat, at the moment? @gabyx are you saying there's a bug in the current implementation? Can you give a little more explanation as to what that is, and maybe an example of how to trigger it?

[gabyx]

[asd](attachement:asd.jpg) # this comment...
will result here in
[asd](attachement:asd.jpg) # this comment... # this comment...
it should be match.group(0)

[gabyx]

match.string is not what should be returned if we do not want to substitute... (no?)
match.string is the string passed to match/search... https://docs.python.org/3/library/re.html#re.match.string

[gabyx]

dito as below

[mpacer]

1. If this is getting a full EmbedPreprocessor working that is compatible with the existing HTMLExporter and SlidesExporter (and ideally the MarkdownExporter); I'd be interested to restart the conversation on how that would fit into nbconvert core.
2. as far as needing a separate exporter, if the only difference is enabling the EmbedPreprocessor, you might want to wait for [WIP] Download converted documents with uploadable configuration  jupyter/notebook#2413 to land, since it creates a new endpoint that you can use to include a config file (json) and nbconvert will attach that config file to the exporter, meaning you could set this by just having prespecified config files associated with the extension