Add new data attribute into get_image_tag function

Viewing 9 replies - 1 through 9 (of 9 total)
  • alex20hz

    (@alex20hz)

    12 years ago

    Mate, did you solve this? I have the same problem and trying to solve it.

    alex20hz

    (@alex20hz)

    12 years ago

    My code:

    //Add fancybox class
    define(“IMAGE_FILETYPE”, “(bmp|gif|jpeg|jpg|png)”, true);

    function add_fancyboxlazyloading($string) {
    $pattern = ‘/<a(.*?)href=”(.*?).(bmp|gif|jpeg|jpg|png)”(.*?)><img (.*?) /’;
    $replacement = ‘<a$1href=”$2.$3″ class=\’fancybox\’><img src=”#” data-orignal=”$2″ class=”lazy” ‘;
    return preg_replace($pattern, $replacement, $string);
    }

    add_filter(‘the_content’, ‘add_fancyboxlazyloading’);

    Trying to get this string:
    <img src=”loading.gif” data-orignal=”http://localhost/wp-content/uploads/2011/10/aw2011&#8243; class=”lazy” alt=”” title=”021700_Summer_Desserts_2011_Sleekster_lid” width=”560″ height=”595″ class=”alignnone size-medium wp-image-1208″ />

    alex20hz

    (@alex20hz)

    12 years ago

    The solution:

    //Fancybox and Lazy load support
    function add_fancybox_lazyload($content) {
    global $post;
    $pattern =”/<a(.*?)href=(‘|\”)(.*?).(bmp|gif|jpeg|jpg|png)(‘|\”)(.*?)>/i”;
    $replacement = ‘<a$1href=$2$3.$4$5 class=”fancybox”>’;
    $content = preg_replace($pattern, $replacement, $content);

    $search = ‘/src\=\”([^\s]+(?=\.(jpg))\.\2)\”/’;
    $content = replacer($content, $search, ‘/src/’, ‘data-original’);
    $search = ‘/img\ class\=\”/’;
    $content = replacer($content, $search, ‘/class\=\”/’, ‘class=”lazy ‘);
    $search = ‘/alt/’;
    $content = replacer($content, $search, ‘/alt/’, ‘src=”grey.gif”‘);

    return $content;
    }

    function replacer($src, $search, $find, $replace){
    preg_match_all($search, $src, $result, PREG_OFFSET_CAPTURE);
    foreach($result[0] as $entry){
    $org = $entry[0];
    $rep = preg_replace($find, $replace, $entry[0]);
    $org = “/” .str_replace(array(“=”,”:”,”/”,”.”,”-“,”_”,'”‘,”‘”,” “), array(“\=”,”\:”,”\/”,”\.”,”\-“,”\_”,’\”‘,”\'”,”\ “), $org). “/”;
    $src = preg_replace($org, $rep, $src);
    }
    return $src;
    }

    add_filter(‘the_content’, ‘add_fancybox_lazyload’);

    alvaro05

    (@alvaro05)

    11 years, 9 months ago

    Hey this is awesome, I have been looking for this for a while.
    Just one tip,

    In this line:
    $search = '/src\=\"([^\s]+(?=\.(jpg))\.\2)\"/';

    I think the other image formats should be introduced, so my suggestion is:
    $search = '/src\=\"([^\s]+(?=\.(bmp|gif|jpeg|jpg|png))\.\2)\"/';

    alvaro05

    (@alvaro05)

    11 years, 8 months ago

    A problem I am experiencing with alex20hz code is that it replaces every text where ‘alt’ is written with the src=”…”.

    How can I solve this?

    Pedro Carvalho

    (@pedroghandi)

    11 years, 8 months ago

    hei alvaro, you got a response in wp.se 😉

    alvaro05

    (@alvaro05)

    11 years, 8 months ago

    Sorry, I don’t understand what you mean. I asked there too but there is no response yet..

    alvaro05

    (@alvaro05)

    11 years, 8 months ago

    I see it now, thanks! Let me test it and if it works I’ll also post it here’

    alvaro05

    (@alvaro05)

    11 years, 8 months ago

    Thanks to Pedro ghandi that answered my question here: http://wordpress.stackexchange.com/questions/60792/replace-image-attributes-for-lazyload-plugin-data-src

    Here is my final code:

    function add_lazyload($content) {
     $dom = new DOMDocument();
     @$dom->loadHTML($content);

     foreach ($dom->getElementsByTagName('img') as $node) {
         $oldsrc = $node->getAttribute('src');
         $node->setAttribute("data-original", $oldsrc );
         $newsrc = ''.get_template_directory_uri().'/library/images/nothing.gif';
         $node->setAttribute("src", $newsrc);
     }
     $newHtml = $dom->saveHtml();
     return $newHtml;
}

add_filter('the_content', 'add_lazyload');

    This inside functions.php

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Add new data attribute into get_image_tag function’ is closed to new replies.