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?

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?

• uploads
• attachments
• media
• media-library
• tinymce

Share Improve this question asked Jan 7, 2019 at 22:41 That Brazilian GuyThat Brazilian Guy 1,24133 gold badges1919 silver badges4343 bronze badges 1

• Related: wordpress.stackexchange/q/113367, wordpress.stackexchange/q/124074, wordpress.stackexchange/q/298155, wordpress.stackexchange/q/193006, wordpress.stackexchange/q/112294, stackoverflow/a/41603488 – That Brazilian Guy Commented Jan 7, 2019 at 23:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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!