Use plugin to format images

[aciccarello]

The current include for images makes markdown editing harder. I would prefer to use the title option of markdown links as the caption. By using a plugin to re-write the image tag, we could red the title attibute and use that in the output. That still leaves the width formatting (full width, float), however some markdown processors allow a {:attrName="attrValue"} syntax which adds modifiers to the image. We could use this to pass the values. One complication is that we want to support markdown in the caption.

Current syntax

{% include image.html
    file="/assets/img/peru-andean-cock-of-the-rock.jpg"
    alt="bird with a bright orange body and head, black wings and a gray back"
    caption="Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"
    display="float"
%}

Desired syntax

![bird with a bright orange body and head, black wings and a gray back](/assets/img/peru-andean-cock-of-the-rock.jpg "Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"){:display="float"}

![there are options to split onto multiple lines](
  /assets/img/peru-andean-cock-of-the-rock.jpg
  "Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"
){:display="float"}

Expected Output

<figure class="post-img--float">
    <img src="/assets/img/peru-andean-cock-of-the-rock.jpg" alt="bird with a bright orange body and head, black wings and a gray back">
    <figcaption class="mdc-typography--caption">
        Andean cock-of-the-rock – <a href="https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg">Photo by Jerry Thompson</a> [<a href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>]

    </figcaption>
</figure>

Blocked by aciccarello/aciccarello.github.io#30

References

• https://dev.to/stephencweiss/markdown-image-titles-and-alt-text-5fi1
• https://www.xaprb.com/blog/how-to-style-images-with-markdown/

[aciccarello]

Could be done via a markdown plugin instead of eleventy. markdown-it-implicit-figures seems like an option.

[aciccarello]

This would probably involve implementing arve0/markdown-it-implicit-figures#20 or using markdown-it-image-figures

[aciccarello]

An alternative would to use a paired shortcode to combine markdown and liquid.

Advantage

• Markdown remains standard
• Avoids extra long lines for images/properties can be defined line by line

Disadvantage

• Shortcodes don't support named parameters in liquid so need to be positioned correctly (how do you skip the caption?)

{% image
    "Andean cock-of-the-rock -- [Photo by Jerry Thompson](https://commons.wikimedia.org/wiki/File:Rupicola_peruviana_%28male%29\_-San_Diego_Zoo-8a.jpg) [[CC BY 2.0](https://creativecommons.org/licenses/by/2.0)]"
    "float"
%}
![bird with a bright orange body and head, black wings and a gray back](/assets/img/peru-andean-cock-of-the-rock.jpg)
{% endimage %}

[aciccarello]

Wrong issue number...