[nbdev][fastpages] How to insert images side-by-side?

nbdev
5

Thanks, @rohanrajpal. This solved everything, I mean literally everything. Flex boxes are a very strong feature.

UPDATE: @pete88b provided the solution for image links not getting converted by nbdev (by zero indenting the <img src="">).

Summary of what I did

Refer to these two links for the complete explanation of flexbox along with other cool things that you can do with fexbox.

  • An Equal Height Image Gallery for Jekyll link
  • Equal Height Images with Flexbox link

In markdown cell of Jupyter use this HTML code (this will form for markdown files also)

<figure>
    <div style="display:flex">
        <div style="flex:1">
            <figure>
<img src="images/post_004/02.jpeg">
                <figcaption><center>Temp caption 1</center></figcaption>
            </figure>
        </div>
        <div style="flex:1">
            <figure>
<img src="images/post_004/03.jpeg">
                <figcaption><center>Temp caption 2</center></figcaption>
            </figure>
        </div>
    </div>
    <figcaption><center>Main caption</center></figcaption>
</figure>

Note:- Zero indent <img src="">. Otherwise nbdev will not convert the source URLs.

In this above example, two examples would be shown. All the details can be found in the two links above. But this is the basic template that would work fine. <div style="flex:1">, “1” is referring to the aspect ratio of the image (I used a dummy value for this example).

Things I learned

I only know basic HTML and CSS, so after reading the suggestion by @rohanrajpal, it solved all my issues with fastpages.

  1. Cannot use brackets (, ) in markdown image import. The below code does not work.

    ![](image.png "Caption (something)")

    It gives an error, I think it has something to do with the expression search that nbdev is doing underneath.

    <figure> can be used to achieve this.

  2. Could not use links in image port, due to the problem of brackets I think. The solution of (1) also solved this for me.

Problem

@hamelsmu, image links are not converted when image is imported using <img src="">. I think this is a nbdev issue but I am not sure. If this issue is solved, then there would be no need to make a separate folder for images, which needs to be first pushed to Github. This will help when we want to add links in caption of images or use multiple image like in flexbox.

Thanks @jeremy, @hamelsmu or this awesome blogging platform. I have converted all my previous blogs to fastpages and moved to fastpages as my personal website. Now I can just write a jupyter notebook and do git push and a new post is created.

4 Likes