我想添加集成JavaScript动画GIF图像播放器的功能。

它基本上会在页面加载时加载动画GIF的封面图像，而不是下载较大的动画GIF。单击“播放”按钮后，它将下载动画GIF并将其与占位符图像交换，并充当电影。

到目前为止，我的想法是在media Manager中添加以下两个新的元字段：

复选框是否将imnage定义为动画GIF当前使用媒体管理器时，编辑完元字段并插入帖子后，会创建类似以下内容的图像语法：

<img 
class="aligncenter size-full wp-image-7325" 
src="http://.dev/wp-content/uploads/2014/12/conceptexploration.png" 
alt="conceptexploration" 
width="800" 
height="600" />

我的问题是，如果选中了用于将图像定义为动画或非动画的“新建元字段”复选框，我是否可以在选中时为图像生成不同的语法？

如果可以的话，我可以生成动画GIF播放器所需的HTML，其中图像源是占位符/封面图像，实际的动画GIF图像将存储在图像数据属性中，并添加一些特殊类来指示它是GIF播放器。

那么，是否可以修改media Manager生成的图像HTML字符串，并根据该媒体项中我的自定义元字段的选中状态进一步修改它？

此代码可能很有用，因为它是一个过滤器，用于修改从媒体管理器发送到编辑器的内容。

我不确定是否可以在此处访问自定义元数据的值，但要确定是否要修改字符串。此外，如果要修改字符串，我还需要在此处插入meta的封面图像的值！

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
  $html = str_replace(\'<img \', \'<img id="my-super-special-id" \', $html);

  return $html;
}
add_filter(\'image_send_to_editor\', \'filter_image_send_to_editor\', 10, 8);

<小时>

function filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {

    $animatedGif = (bool) get_post_meta($id, \'animated_gif\', true);

    if($animatedGif){
        $gifCoverImgUrl = get_post_meta( $id, \'animated_gif_cover_url\', true );

        // build my GIF player
        if(isset($gifCoverImgUrl) && $gifCoverImgUrl != \'\'){
            $doc = new DOMDocument();
            $doc->loadHTML($html);
            $xpath = new DOMXPath($doc);
            $src = $xpath->evaluate("string(//img/@src)"); 

            $html = \'<img class="gifplayer" src="\'.$gifCoverImgUrl.\'" data-gif="\'.$src.\'" />\';
        }
        return $html;

    }else{
        // do nothing and return normal image tag string
        return $html;
    }

}
add_filter(\'image_send_to_editor\', \'filter_image_send_to_editor\', 10, 8);