Adding captions to images

[dariah-eric]

Adding captions to images

[ttasovac]

@stefanprobst if you don't have time for this, could you please give me some pointers as to how and where in the code one would set this up. many thanks in advance.

[ttasovac]

To test this, I put showCaptions: ['title', 'alt'] into gatsby-config.js and rebuilt the site.

It works very nicely for:

![Diagram 1. Controlled vocabularies in data architecture](images/cv_and_skos_model_diagram_1.png)

but it doesn't work for remote urls:

![Снимок экрана 2019-07-05 в 16.00.22](https://i.imgur.com/YhTjSk7.png)

In the latter case, no figcaption gets generated. Do you know why? Is this a feature or a bug?

[stefanprobst]

thanks, i'll look into this.

regarding defaulting to alt as fallback caption -- from an accessibility perspective i'm not sure if this is advisable: alt should describe what is in the image, which might not be what should be visible as image caption

[stefanprobst]

btw any reason we cannot pull the image from imgur to our repo?

[stefanprobst]

ok, so what's happening is that gatsby-remark-images will look for image and imageReference nodes in the parsed markdown AST, and (i) hooks the image up with gatsby's image processing, and (ii) optionally adds a figcaption. remote urls are of course parsed differently (as link, see https://github.com/syntax-tree/mdast#link) -- so the easiest is to pull post images into the repo. alternatively we would have to write our own little plugin for remark (the markdown parser)

[ttasovac]

regarding defaulting to alt as fallback caption -- from an accessibility perspective i'm not sure if this is advisable: alt should describe what is in the image, which might not be what should be visible as image caption

you're absolutely right. alt is very important for accessibility but we haven't been enforcing proper use of it on D-C. we probably should.

i think the most pragmatic solution then would be to:

• leave the markdown images as they are, i.e. use [alt-text](link-to-image.png) — this has been working with local images and with imgur, so it's all good.
• auto-wrap markdown images via mdxprovider to use ImageLightbox

the users would then have two options to create images:

• in markdown (preferred solution, if they don't need a caption)
• using ImageLightbox component (the only solution, if they want a caption) — we'll just need to add captions as props (as discussed in #51)

both of the above will, in the end, be displayed as lighboxes, but only those created with the ImageLighbox component, will be able to display a caption.

so, two questions:

1. does what I just outlined above sound sensible to you?
2. can we use remote images (i.e. imgur) directly in the ImageLighbox component?

[stefanprobst]

in the new DC version, adding captions to images via title should now work correctly (see custom rehype plugin)