Requesting captioning support

[Genesis3800]

Hey @dimaMachina ,

Thanks for building out this awesome framework, we use Nextra at work.

Would you be open to adding some sort of support for the captioning of images within Nextra? It could be helpful for adding more context or properly crediting the source of the image in some cases.

Example attached:

[dimaMachina]

Hi, how do you see this feature to be implemented? Should captioning be based on alt img prop?

[jessems]

I would say so, @dimaMachina. This is what I'm used to from other markdown based blogging solutions.

![caption & alt text](image/url)

[jessems]

I can see if I can put a pull request together, @dimaMachina. If you can give me some pointers that would be helpful.

[Genesis3800]

Hey @dimaMachina , sorry I totally missed this thread in notifications. I was thinking of something like this:

<img src= "/img/directory-path/image-name.png" alt= "random alt text" caption= "random caption text"/>

@jessems Looking forward to your PR, assuming Dima approves. Lemme know If I can help.

[dimaMachina]

<img src= "/img/directory-path/image-name.png" alt= "random alt text" caption= "random caption text"/>

@Genesis3800

Nextra doesn't convert img html element, only markdown ![alt prop](path-to-image). And I am against custom props (e.g. caption in your example)

[Genesis3800]

@dimaMachina ,

1. Fair enough, I understand you might not want to introduce the headache of custom props in Nextra. If nextra can use the alt prop to render captions below images, that would be wonderful too.

2. Forgive me if I misunderstood you, but do you mean to say Nextra does not convert the HTML img into rendered images? Because that is not accurate since I actively use the img element in many places inside my Nextra-based docs repo at work.

[dimaMachina]

I understand you might not want to introduce the headache of custom props in Nextra.

exactly

but do you mean to say Nextra does not convert the HTML img into rendered images?

yes, Nextra converts only markdown image/imageRefernce syntax to use NextImage, not html <img />

[feynon]

Would love to see this table stakes feature implemented.

[Ding-Fan]

I'm using a custom component to add caption. I didn't use the nextJS Image.

import RichImage from '../components/RichImage'

<div className='grid place-content-center' >
    <RichImage caption="我有一个博客，名字叫“又不是不能写博客”，你帮我生成一张头图" className='w-full md:w-80' src='images/2024-02-28-19-01-02.png' />
</div>