Caption for images

[zirkelc]

It's quite easy to implement caption for images:

n2m.setCustomTransformer('image', async (block) => {
  const { image } = block as ImageBlockObjectResponse;
  const src = image.type === 'external' ? image.external.url : image.file.url;
  const caption = image.caption ? image.caption[0]?.plain_text : '';

  return `
  <figure>
    <img src="${src}" alt=${caption} />
    <figcaption>${caption}</figcaption>
  </figure>`;
});

I was wondering why that's not the default behaviour?

[that-ambuj]

I assume the reason why it is not the default behaviour might because of:

• This behaviour returns html instead of markdown and might be confusing to someone expecting just plain markdown.
• Image captions are handled differently by different markdown parsers and this type of behaviour can be implemented in Hugo and Zola with custom markups and shortcodes.

I might be wrong here and above are just my assumptions. Of couse, we should take @souvikinator's opinion on this.

[zirkelc]

Yes, I wasn't aware that markdown doesn't support captions natively. Maybe this could be implemented as GitHub flavored markdown mode that can be turned on optionally.

[that-ambuj]

This sounds like a major feature addition and I think @souvikinator should decide on this one.

[souvikinator]

@that-ambuj made valid points. Including HTML tags in content can be tricky due to rendering variations in different markdown parsers.

I believe it's time to work on feature allowing people to choose the markdown flavour they want the output in (as @zirkelc mentioned)

It's going to take some time but definitely will be a huge game changer.

Would love to know your thoughts on this.

[souvikinator]

Btw just came across this, it's worth checking out:

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *caption here* |

and here is the result

caption here

thoughts on this?

[souvikinator]

Also

![image](https://picsum.photos/200)
*image_caption*

produces same output as

 <figure>
    <img src="https://picsum.photos/200" alt="image_caption" />
    <figcaption>image_caption</figcaption>
  </figure>