Is there a way to render HTML5 captions in Drupal 8? I've tried with embedding images and embedding media in the WYSIWYG, and I've also tried with media migrated from D7 to D8, but nothing works.
An image with a source like this in the WYSIWYG:
<img alt="mermaid" data-caption="actual photo of a mermaid" data-entity-type="file" data-entity-uuid="5b148b62-6890-4b90-98e6-63a2cad3fe70" src="/sites/default/files/inline-images/mermaid.gif" />
renders on the page like this:
<p>
<img alt="mermaid" data-entity-type="file" data-entity-uuid="5b148b62-6890-4b90-98e6-63a2cad3fe70" src="/sites/default/files/inline-images/mermaid.gif" />
actual photo of a mermaid
</p>
and a media entity with a source like this on the WYSIWYG:
<drupal-entity data-caption="this is the caption" data-embed-button="media" data-entity-embed-display="view_mode:media.large_480x480" data-entity-type="media" data-entity-uuid="7012b662-1430-4610-8fa3-65eede89f7ba"></drupal-entity>
renders on the page like this:
<div class="contextual-region row bs-1col media media--type-image media--view-mode-large-480x480">
<div></div>
<div class="col-sm-12 bs-region bs-region--main">
<div>
<a href="example.com/sites/default/files/field/image/groundhog_480x480.jpg">
<img src="/sites/default/files/styles/large/public/field/image/groundhog_480x480.jpg?itok=1DapCxP0" alt="Photo of a groundhog" />
</a>
</div>
</div>
</div>
this is the caption
with random <div>
tags that hold nothing and the caption pulled entirely out of the relevant tag so its parent is actually the body field. Neither of these use HTML5 with a wrapping <figure>
tag or even a <figcaption>
or <caption>
tag.
I found a suggested hack that uses the image's title tag as a caption, and the sandboxed Image Caption module uses jQuery to produce similar results, but my site is migrating hundreds of articles where the content team has used captions for image credits and we're legally required to display those, so we can't pretend the image title is the caption. Also, the way captions are currently being rendered doesn't allow us to style the them in a way that ties them to the image or separates them from the surrounding paragraphs, so they just blend in with the rest of the text.
I tried to dump the image's variables to the page, but there is no caption:
array:8 [
"#theme" => "image_style"
"#style_name" => "large"
"#attributes" => []
"#title" =>null
"#uri" => "public://field/image/groundhog_480x480.jpg"
"#width" => "480"
"#height" => "480"
"#alt" => "Photo of a groundhog"
]
so somewhere in the rendering process the caption is being removed from the image and rendered separately.