0

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?

1

1 Answer 1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.