Rendering images from HTML tag in jupyter notebook.(Solution&Tips))

nbdev
1

I had run into this issue yesterday while posting my blogs on fastpages. You often need to resize images in your blog so that they match the font-size and give a good look to your blog. Resizing images in jupyter markdown was not working for me. There were some solutions on stack overflow like
![](./my_icons/fastai_logo.png =200x500)
This did not work for me. Other option is to directly use HTML tags in your markdown. This is now fully supported by fastpages, thanks to @hamelsmu who continuously worked with me to get it sorted.
The latest template can render your HTML image tags exactly same as you do it locally on jupyter. Some tips to follow:

  1. Avoid having two consecutive image tags one after the other. The second image in this case does not get rendered properly.
  2. If the images are not getting rendered properly, split the text in different markdown cells. The last line in the cell should be the image tag.
  3. Avoid starting a cell directly with an image tag. Write some text before it.
  4. While this syntax works for images
    <img src="images/sig.PNG" style= "width:450px;height:250px"/>
    prefer using one without style like this,
    <img src="images/tanh.PNG" width="450" height="250"/> . The latter one actually renders the images in the specified dimensions.

I’ll keep adding more suggestions if I come across any. Thank you @hamelsmu @jeremy.

5 Likes
2

HI @kushalj,
do you know how to add caption into those <img tag ?

3

Is it still working. my fastpages are not getting build though using same syntax.

<img src="images/nnstructure.png" width="500"/>

This is throwing error while building site.

The corresponding error trace as folllows:

href="https://github.com/mldurga/easydl/blob/master/_notebooks/images/nnstructure.PNG?raw=1">https://github.com/mldurga/easydl/blob/master/_notebooks/images/nnstructure.PNG?raw=1</a>" Valid syntax: {% include file.ext param='value' param2='value' %} in /github/workspace/_posts/2021-09-20-Fastbook-chapter13.md
      Remote Theme: Cleaning up /tmp/jekyll-remote-theme-20210923-1-1tfnm0t
/usr/gem/gems/jekyll-4.1.1/lib/jekyll/tags/include.rb:74:in `validate_params': Invalid syntax for include tag: (ArgumentError)

max-width="500" file="<a href="https://github.com/mldurga/easydl/blob/master/_notebooks/images/nnstructure.PNG?raw=1">https://github.com/mldurga/easydl/blob/master/_notebooks/images/nnstructure.PNG?raw=1</a>"

Valid syntax:

{% include file.ext param='value' param2='value' %}

	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/tags/include.rb:29:in `initialize'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/tag.rb:9:in `new'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/tag.rb:9:in `parse'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/block_body.rb:34:in `parse'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/document.rb:10:in `parse'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/document.rb:5:in `parse'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:132:in `parse'
	from /usr/gem/gems/liquid-4.0.3/lib/liquid/template.rb:116:in `parse'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/liquid_renderer/file.rb:13:in `block in parse'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/liquid_renderer/file.rb:70:in `measure_time'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/liquid_renderer/file.rb:12:in `parse'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:122:in `render_liquid'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:80:in `render_document'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/renderer.rb:63:in `run'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:532:in `render_regenerated'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:517:in `block (2 levels) in render_docs'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:516:in `each'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:516:in `block in render_docs'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:515:in `each_value'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:515:in `render_docs'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:207:in `render'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/site.rb:80:in `process'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/command.rb:28:in `process_site'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:65:in `build'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:36:in `process'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `block in process_with_graceful_fail'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `each'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/command.rb:91:in `process_with_graceful_fail'
	from /usr/gem/gems/jekyll-4.1.1/lib/jekyll/commands/build.rb:18:in `block (2 levels) in init_with_program'
	from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `block in execute'
	from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `each'
	from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/command.rb:221:in `execute'
	from /usr/gem/gems/mercenary-0.4.0/lib/mercenary/program.rb:44:in `go'
	from /usr/gem/gems/mercenary-0.4.0/lib/mercenary.rb:21:in `program'
	from /usr/gem/gems/jekyll-4.1.1/exe/jekyll:15:in `<top (required)>'
	from /usr/local/bundle/bin/jekyll:29:in `load'
	from /usr/local/bundle/bin/jekyll:29:in `<main>'

Do u have any idea, what is happening there.

4

I wonder if it might work if you used the IPython HTML element? As in, in a code cell:

from IPython.display import HTML

HTML('<img src="images/nnstructure.png" width="500"/>')

…? I know that ideally one shouldn’t have to do that, just wondering if there’s a way to get you up & running quickly.

5

hey…
Really great…thats working…I have been combing forum for this…some how I posted my blog by working around images. But this is working and now we can adjust sizes of the images easily…
Many people are searching for this…Thank you.