WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to implement the JAIL javascript into my WordPress install. The javascript requires me to add a data-attribute and change the output html of images.

I have been looking through the codex for filters or hooks that can help me, but i can't find anything. Anyone have a solution?

share|improve this question
This is really dependent on your theme, there are just to many ways it can be outputting images. – Wyck Jan 5 '13 at 4:47
I'm think of the images added inside the "writing area". Those inside "the_content". – andeersg Jan 5 '13 at 12:12
up vote 2 down vote accepted

Your better off adding your custom image data when you insert it into a post using media_send_to_editor, the caveat is this will not be applied to any existing images, only ones inserted after adding the function.

To apply it to to existing content you will have use preg_match on the_content filter, but this can significantly slow your site down, it is advised you don't parse the output like this.

A media_send_to_editor example:

function WPSE_78285_Mime($html, $id) {

    //fetching attachment by post $id
    $attachment = get_post($id); 
    $mime_type = $attachment->post_mime_type;

    //get an valid array of images types   
    $image_exts = array( 'image/jpg', 'image/jpeg', 'image/jpe', 'image/gif', 'image/png' );

    //checking the above mime-type
    if (in_array($mime_type, $image_exts)) { 

        // the image link would be great
        $src = wp_get_attachment_url( $id );

        // enter you custom output here, you will want to probably change this
        $html = '<a href="' . $src .  '" class="your-class" data-src="/img/image1.jpg" rel="your-rel"><img src="'. $src .'" /></a>';
        return $html; // return new $html    
        return $html;

add_filter('media_send_to_editor', 'WPSE_78285_Mime', 20, 2);
share|improve this answer
Ah, thanks for good advice and a good solution :) – andeersg Jan 6 '13 at 15:41

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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