How to render HTML images from jupyter notebook?

fastai users nbdev & fastpages
#1

While the tag works perfectly locally in jupyter, my build is failing after pushing my code. The error it shows is a jekyll build error,

image
image2628×484 75.2 KB

The html code in my notebook is,
<img src="./my_icons/fastai_logo.png" width="800" height="600"/>
Can someone explain in detail how can I fix this?
Thanks

#2

Can you provide a link to your notebook? Do you need to embed HTML in your notebook, can you use markdown? ![]("https://yourimage.com")

or

![](my_icons/fastai_logo.png)

#3

Link to my notebook: https://github.com/kushalj001/black-box-ml/blob/master/_notebooks/2020-01-10-Building-Sequential-Models-In-PyTorch.ipynb
I need to resize my images. I am not able to do that locally using markdown.
I tried this syntax but did not work
[](my_icons/fastai_logo.png =600x800)

#4

Ok there is no immediate fix, this being converted to a liquid tag by nbdev, so unfortunately you are limited to markdown. As a temporary measure, I suggest changing the size of the logo on your computer instead

#5

Alright.
Thanks a lot for the quick reply.

#6

What’s the issue there? Is it just that we’re missing the html in _includes for that?

#7

@jeremy the problem is I’m hijacking settings.ini to make sure images get the right url:

doc_path = images/copied_from_nb
doc_host = https://nbdev.fast.ai
doc_baseurl = {{site.baseurl}}/images/copied_from_nb/

so naturally, when the jupyter is converted to html, that url is converted to this:

<p>{% include image.html height="600" max-width="800" file="{{site.baseurl}}/images/copied_from_nb/./my_icons/fastai_logo.png" %}</p>

Which is invalid liquid. to fix this I suppose I could:

  1. Monkey patch nbdev to allow me to inject the baseurl outside settings.ini
  2. Monkey patch the function that wraps the includes
  3. Perhaps something else?

I generally try to avoid monkey patching, if possible because it feels dangerous for long term stability so not sure. But I’m also hesitant to try to force nbdev to change to this use case which seems pretty specific? Please let me know your thoughts

EDIT: made some corrections to some typos in my answer just now. Please re-read if haven’t already.

#8

Just to clarify, yes we are missing an image.html in _includes but that is not the real problem (I can grab that template from nbdev), in this case, because of the issue I mentioned above with the baseurl.

#9

Why is it using {{site.baseurl}} here, rather than a ConfigParser template string? The idea with nbdev is to have everything in settings.ini, so then any template stuff is handled automatically.

1 Like
#10

This is my first time dealing with ConfigParser, so I am pretty ignorant as to what that means. I will try to read up on that. If you have any pointers to help get me started looking at the right approach please let me know! Thanks

#11

Look at the base settings.ini in nbdev_template for examples.

1 Like
#12

Thanks will take a look later today!

#13

@jeremy @sgugger

Ok I think I believe I understand what the ConfigParser template string is. The problem I’m trying to solve is I need to pass a variable from _config.yml to settings.ini, which I was doing in a hacky way by injecting liquid into that setting.

The problem is I need the doc_baseurl to be prepended with the baseurl from the Jekyll config file. Not clear to me what the best way to achieve this is? If I did it with Actions, it would result in a broken build because it would have to be committed into the repository before I could trigger a change to settings.ini.

Maybe I’m not thinking of something obvious. Please let me know your thoughts.

EDIT: I guess the workaround is the user must change both settings.ini as well as _config.yml if they use a custom domain? That seems like the only way out to me. This is what I will move forward with for now.

#14

I have addressed this per the above comments in https://github.com/fastai/fastpages/pull/139

#15

Thanks a lot for the swift actions. I uploaded my blog from the new repo. Although it passes the build, the images do not show up on my website.

1 Like
#16

You have to create a new repo from the newest template and copy your posts over. I know this is painful, (I’m working on a slightly easier path to upgrade in the near future

EDIT: I see that you are using the newest template. I had to change another thing for this to work in the last 15 minutes or so because this was a breaking change (so I had to freeze the version). I made a PR for you so you don’t have to copy everything https://github.com/kushalj001/black-box-ml/pull/2

Hopefully it works now?

1 Like
#17

I did that. From the newest template which has image.html in _includes. The images won’t render yet. And my markdown also breaks at some places. Trying to figure it out. Link https://kushalj001.github.io/black-box-ml/lstm/pytorch/gates/vanishing%20gradient/2019/12/28/Understanding-LSTMs.html

#18

Will do this right away.

#19

The HTML images are not rendering in my blog post @hamelsmu. https://kushalj001.github.io/black-box-ml/lstm/pytorch/gates/vanishing%20gradient/2019/12/28/Understanding-LSTMs.html

image
image1903×810 93.4 KB

The markdown below image also gets affected due to that I guess.

#20

I’m forking your repo and investigating now

1 Like