Code-Block Environment for Extended Image Use

As I find itvery tedious to work with images in obsidian (markdown in general), I would like to have some kind of clear environment to give my images a caption, an alt text and a styling. (See also Embed vault images via HTML with relative path)

For now I use css snippets e.g. to center my images, which is totally fine. But I cannot give them a real caption, that is displayed under the image.

Thats why I somewhat envision an environment like the following (maybe in YAML?):

# "img" codeblock environment
src: MyFunnyImageIWantToSee.png
caption: "This is a very funny image I want to see!"
alt: "If you can read this, you dont see my funny image..."
style: "margin:auto;width:100px"
id: funny-picture
# comment

or for multiple images:

# "multi-img" codeblock environment
- src: MyFirstImage.png
- caption: "This is my first image"
- src: MySecondImage.png
- caption: "This is my second image"

Where the keys mean:

  • src is the same as I’d refer to an image in markdown ![[MyFunnyImageIWantToSee.png]]
  • caption is the caption that is displayed under the image (optional)
  • alt is an alternative text, if the image source was not found (optional)
  • style is css style that is only for this image (optional)
  • id an id for whatever reason (opional)
  • img for multi image views makes an instance of one image

Furthermore this should get a figure html wrapping, somewhat like this:

<figure class="img" id="funny-picture" style="margin:auto;width:100px">
    <img src="MyFunnyImageIWantToSee.png">
    <figcaption>This is a very funny image I want to see!</figcaption>

or for multiple images:

<figure class="multi-img">
    <figure class="img">
        <img src="MyFirstImage.png" >
        <figcaption>This is my first image</figcaption>
    <figure class="img">
        <img src="MySecondImage.png">
        <figcaption>This is my second image</figcaption>
    <!--<figcaption>Caption for the whole group of images?</figcaption>-->

These can of course then also be reffered to via css to style them. Please let me know what you think. Is this something also others would like to have? Where do you see challenges? Can you extend on this?