Support » Fixing WordPress » Add new data attribute into get_image_tag function

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

    <img src=”” 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=” src=”” 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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Mate, did you solve this? I have the same problem and trying to solve it.

    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″ />

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

    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)\"/';

    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?

    hei alvaro, you got a response in šŸ˜‰

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

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

    Thanks to Pedro ghandi that answered my question here:

    Here is my final code:

    function add_lazyload($content) {
         $dom = new DOMDocument();
         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


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.