Adding attachment custom field metadata to TinyMCE <img> tag

Question

I've successfully added a custom field to the media upload dialog, but now I need (1) this field to be present on the <img> tag on post content whenever an image is inserted, and (2) a way to edit this on TinyMCE.

The output

Currently it outputs the following shortcode:

[caption id="attachment_277" align="alignnone" width="150"]
  <img class="size-thumbnail wp-image-277" 
   src="http://localhost/wp-content/uploads/2019/01/filename-150x150.png"
   alt="ALT" width="150" height="150" />CAPTION
[/caption]

Which then is converted into

<figure id="attachment_277" style="width: 150px" class="wp-caption alignnone">
<img class="size-thumbnail wp-image-277" src="http://localhost/wp-content/uploads/2019/01/filename-150x150.png" 
alt="ALT" width="150" height="150" 
srcset="http://localhost/wp-content/uploads/2019/01/filename-150x150.png 150w, http://localhost/wp-content/uploads/2019/01/filename-100x100.png 100w"
sizes="(max-width: 150px) 100vw, 150px" />
<figcaption class="wp-caption-text">CAPTION</figcaption></figure>

However, I need it to be

<figure class="someclass">
  <img class="otherclass" srcset="..." src="..." 
       width="800" height="600" alt="ALT">
  <figcaption class="legend">CAPTION — $field</figcaption>
</figure>

How can I change it?

Editing the value

I also need a way for the field to be shown not only on the media library dialog, but also on TinyMCE's image edit dialog.

How can I achieve that?

Answer 1

Currently I've achieved a somewhat acceptable solution by using the do_shortcode_tag filter as mentioned in this answer, and using get_post_meta to fetch the value, as mentioned in this answer.

There are (at least!) two caveats, however:

• The id in do_shortcode_tag's $attr isn't the attachment post ID, but rather the CSS id from the original shortcode. I'm having to hope it'll be always attachment_NNN (where NNN is the attachment ID),
• The user can't edit the value on TinyMCE. It can be actually a good thing, because of consistency.

I'm hoping someone can come up with a better answer!