Custom Media Meta fields to alter the generated image HTML that is inserted into a post for my animated GIF image player?

Question

I want to add the capability to integrate a JavaScript animated GIF image player.

It basically will load a cover image for the animated GIF on page load instead of downloading the larger animated GIF. Once a play button is clicked, it downloads the animated GIF and swas it out with the placeholder image and acts as a movie.

My idea so far is to add these 2 new meta fields to the media manger:

• checkbox to define an imnage as an animated GIF or not?
• text input to hold a placeholder image URL which will be the cover image for an animated GIF on page load. It will be a single frame non animated image.

CUrrently when using the media manager when done editing meta fields and inserting into a post it creates image syntax similar to this:

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

My question is, if my new meta field checkbox to define an image as animated or not is checked, can I generate a different syntax for the image when checked?

If I can, then I am able to generate the HTML that is needed for my animated GIF player where the image source would be the placeholder/cover image and the actual animated GIF image would be stored in an image data attribute as well as some special classes added to indicate it is a GIF player.

So is it possibble to modify the generated image HTML string from media manger and further, modify it based on the checked status of my custom meta field in that media item?

---

This code might be helpful as it is a filter to modify what is sent to the editor from the media manager.

I am not sure if I can access the value of my custom meta data here though to determine if I want to modify the string or not in addition if I do I will also need the value of the cover image from meta to insert here!

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);

---

Answer 1

I got it solved....

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);