WordPress.org

Ready to get started?Download WordPress

Forums

Add new data attribute into get_image_tag function (10 posts)

  1. agomendes
    Member
    Posted 2 years ago #

    When the "get_image_tag" function is called it results in the following image tag added into the HTML code

    <img src="http://www.domain.com/wp-content/uploads/2010/06/image-demo.jpg" alt="" title="image demo" width="30" height="43" class="aligncenter size-full wp-image-1525" />

    Presently I’m trying to implement a jQuery plugin that needs a custom HTML5 data attribute. Something like data-href="image-demo.jpg"

    Basically I need to change the original output to:

    <img data-href=" http://www.domain.com/wp-content/uploads/2010/06/image-demo.jpg" src="http://www.domain.com/wp-content/uploads/2010/06/image-demo.jpg" alt="" title="image demo" width="30" height="43" class="aligncenter size-full wp-image-1525" />

    Is this possible with a filter that I can add to functions.php? Someone knows the code that I should use?

    Many thanks for your support.

  2. alex20hz
    Member
    Posted 2 years ago #

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

  3. alex20hz
    Member
    Posted 2 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" class="lazy" alt="" title="021700_Summer_Desserts_2011_Sleekster_lid" width="560" height="595" class="alignnone size-medium wp-image-1208" />

  4. alex20hz
    Member
    Posted 1 year 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');

  5. alvaro05
    Member
    Posted 1 year 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)\"/';

  6. alvaro05
    Member
    Posted 1 year 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?

  7. Pedro Carvalho
    Member
    Posted 1 year ago #

    hei alvaro, you got a response in wp.se ;)

  8. alvaro05
    Member
    Posted 1 year ago #

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

  9. alvaro05
    Member
    Posted 1 year ago #

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

  10. alvaro05
    Member
    Posted 1 year 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!

Topic Closed

This topic has been closed to new replies.

About this Topic