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

nbdev
1

Basically I want to insert two or more images side-by-side and then have a common caption for them. Currently, this cannot be achieved using markdown.

In jupyter, I am able to create a HTML table to achieve the task, but the images are not being rendered by fastpages.

<table style="width:100%">
    <tr>
        <td><img src="images/post_004/01.png"></td>
        <td><img src="images/post_004/02.png"></td>
    </tr>
    <tr>
        <td colspan="2"><center>Figure 1. Caption</center></td>
    </tr>
</table>

When I create an HTML table without using images, it is rendered correctly by fastpages.

Problem

fastpages is not able to convert image URLs, as only markdown is supported.

My solution with problems (please review and give suggestions)

I created another folder in images folder named extra_images and put my images in that folder and pushed the changes to github.

<table style="width:100%">
    <tr>
        <td><img src="https://raw.githubusercontent.com/KushajveerSingh/blog/master/images/extra_images/post_004/01.png"></td>
        <td><img src="https://raw.githubusercontent.com/KushajveerSingh/blog/master/images/extra_images/post_004/02.png"></td>
    </tr>
    <tr>
        <td colspan="2"><center>Figure 1. Caption</center></td>
    </tr>
</table>

This is using predefined links. Now the final URL used by the image can be easily determined as follows

https://raw.githubusercontent.com/{github-user-name}/{fastpages-repo-name}/master/images/{path-to-image}

Now the problem remains how to get the image to the github repo. coped_from_nb folder cannot be used as it is automatically generated. So the only way to get my image to the above folder is by using it somewhere in my jupyter notebook (I think).

The final result that gets rendered is shown below. But the size of the table is small. How to make the table the complete width of the post?

b
b859Ă—222 35.4 KB

Help me

Is there some other way of achieving this?

2

I’ve done this before by using an image editor to combine images into a single image - not very sophisticated but might get the job done for you.

I was also surprised to see table and column width restricted, with no way to see truncated content. Here’s my example and corresponding notebook.

It’d be great to hear if anyone knows how we can customise this without risk of “colliding with current or future versions of fastpages”.

1 Like
3

A simple solution to my over-complicated solution. Thanks for the reminder, I forgot that there was something called image editing also.

1 Like
4

This blog helped me a lot with image galleries

2 Likes
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
6

do you have time to see if “zero indenting” your img tags means they get converted?
something like:

...
    <div style="flex:1">
        <figure>
<img src="images/post_004/01.png">
            <figcaption><center>Caption for figure 1</center></figcaption>
        </figure>
    </div>
...
3 Likes
7

Thanks @pete88b for the suggestion, zero indenting worked. Do you know why this worked?

I edited my previous reply to reflect these changes.

1 Like
8

thanks @kushaj - looks like the regex that finds img tags needs them to be “zero indented”.

i’ll see if we can safely change nbdev to find img tags anywhere in a markdown cell

2 Likes
9

In case you’re interested, I’ve just made a PR to fix this

1 Like
10

Thanks for the effort.

11