$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>uploads - Adding attachment custom field metadata to TinyMCE <img> tag|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>uploads - Adding attachment custom field metadata to TinyMCE <img> tag

    uploads - Adding attachment custom field metadata to TinyMCE <img> tag

    matteradmin9PV0评论

    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,2413 gold badges19 silver badges43 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

    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!

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far