imgproc should follow a <figure/> model to be more semantically correct

[jasonday]

Current output of imgproc from docsy-example site:

<div class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: 610px">
    <img class="card-img-top" src="/blog/2018/10/06/easy-documentation-with-docsy/featured-sunset-get_hu69849a7cdb847c2393a7b3a7f6061c86_387442_600x300_fill_catmullrom_smart1_3.png" width="600" height="300">

    <div class="card-body px-0 pt-2 pb-0">
        <p class="card-text">
Fetch and scale an image in the upcoming Hugo 0.43.
<small class="text-muted"><br>Photo: Riona MacNamara / CC-BY-CA</small></p>
    </div>

</div>

To be more semantically aligned and to improve accessibility, I propose using <figure> and <figcaption> for images included in this manner, which creates a programmatic association between the image and the additional text, providing more context for screen readers :

<figure class="card rounded p-2 td-post-card mb-4 mt-4" style="max-width: 610px">
    <img class="card-img-top" src="/blog/2018/10/06/easy-documentation-with-docsy/featured-sunset-get_hu69849a7cdb847c2393a7b3a7f6061c86_387442_600x300_fill_catmullrom_smart1_3.png" alt="embedded hugo image with obscured code snippet" width="600" height="300">

    <figcaption class="card-body px-0 pt-2 pb-0">
        <p class="card-text">
Fetch and scale an image in the upcoming Hugo 0.43.
<small class="text-muted"><br>Photo: Riona MacNamara / CC-BY-CA</small></p>
    </figcaption>

</figure>

[LisaFC]

That's a nice idea! Is it likely to break anything (I can't see anything obvious...)?

[jasonday]

@LisaFC does the imgproc shortcode need to have alt text added (or is there another way to add alt text that marries this shortcode with Hugo's approach)? Note: images either need alt="" to indicate that it's a decorative image or alt="image description" to ensure screen readers can parse the image. figcaptions are not a substitute for alt text.

For example, I could see:

resources:
- src: "**spruce*.jpg"
  params:
    byline: "Photo: Bjørn Erik Pedersen / CC-BY-SA"
    alt: "Norway Spruce Picea abies shoot with foliage buds."

And then in the improc code:

<img class="card-img-top" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ $image.Params.alt }}>

I can add this to my pull request if this shortcode does not work with Hugo's method of adding alt text to a page bundle image.

[froboy]

FWIW I've done this in a markdown hook using a number of different methods I've found around to also make responsive images. See render-image.html in yusaopeny_docs

The code used looks like ![Alt text](image.png "This is a caption/alt.") where the text after is used as both the caption and the alt text, although that could be modified, I'm not sure how supporting both separately would work in markdown.