Wordpress编辑<img>标记以包含数据属性

I have a custom field added to the Wordpress media uploader, that stores a Vimeo ID. I need to pull this custom field data (if it has been input) into the markup of the default <img> tag in Wordpress - I'd like it to be added as a data- attribute.

Having searched around online I have no leads of what to try here, does anybody have any experience with this?

If the above data- attribute is present, I'd also like to automatically add the class 'video-thumb' to that image.

I am able to call the cusotm field as follows, but have no idea how to incorporate this into the <img> tag:

$video_url = get_post_meta($id, 'video-url', true);

Default Wordpress <img> code

<img class="aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" />

Desired Outcome

<img class="video-thumb aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" data-vimeo-id="69171201" />

You can try this Within your post loop

$key = 'your custom meta key'

echo get_post_meta($post->ID, $key, true);

Full implementation

<?php
$query = new WP_Query('showposts=3');
if ($query->have_posts()):
    while ($query->have_posts()):
        $query->the_post();
        $vimeo = get_post_meta($post->ID, 'your_key', true);
        the_title();
?>

<img class="video-thumb aligncenter size-large wp-image-114" src="#" alt="" width="1024" height="435" data-vimeo-id="<?php echo $vimeo; ?>" />

<?php
    endwhile;
endif;
wp_reset_query();
?>

Please read for more information from here