2015-01-07 4 views
1

В соответствии с jQuery.lazyload любые изображения, которые я хотел бы «lazyload», должны иметь атрибут src, замененный на data-original.Изменить выход Wordpress get_image_tag?

Я предполагаю, что смогу это сделать, используя фильтр WordPress get_image_tag, но я зациклился на том, как на самом деле это произошло.

function image_src($id, $alt, $title, $align, $size) { 
    $html = '<img data-orginial="' . esc_attr($img_src) . '"/>'; 
    return $html; 
} 
add_filter('get_image_tag', 'image_src', 10, 5); 

Для LazyLoad чтобы работать lazy класс также должен быть размещен на IMG, который мне удалось получить работу с помощью WordPress get_image_tag_class фильтр

function image_class($classes) { 
    return $classes . ' lazy'; 
} 
add_filter('get_image_tag_class', 'image_class'); 

Любые мысли о том, как я могу изменить вывод изображения заменить data-orginial вместо src?

ответ

0

Вам нужно будет заменить src Часть

function image_src($id, $alt, $title, $align, $size) { 
    if(! is_admin()) $html = str_replace("img src=","img data-original=",$html); 
    return $html; 
} 
add_filter('get_image_tag', 'image_src', 10, 5); 

Вы, возможно, придется настроить его, чтобы он соответствовал оригинальные <img> настройки.

Редактировать: добавлено предложение Натха.

+0

Спасибо за помощь. Похоже, что это сломает добавление изображений в редакторе WordPress. И я думаю, что может быть не так. – Rich

+0

@rich вы могли бы добавить 'if (! Is_admin()) {...}', который должен остановить его на панели администратора. – naththedeveloper

+0

@ ɴᴀᴛʜ Хорошая мысль. Это, вероятно, на правильном пути, хотя, похоже, это не работает сразу. – Rich

1

Rich-

Я столкнулся с той же проблемой, и пошел по тому же пути, как вы, пытаясь использовать get_image_tag с плохими результатами. Поэтому я придумал обходное решение JS - комментарии к коду должны показать вам, как это сделать:

function() { 
    // To get lazy loading working on blog post 
    // 1- Assign all image source paths into a sourcePath variable 
    var sourcePath = $("figure").find("img").attr("src"); 

    // 2- Nullify source paths, move path to data-original attribute and add lazy-load class to img 
    $("figure").find("img").attr({ 
    "src" : " ", 
    "data-original" : sourcePath 
    }).addClass("lazy-load"); 

    // 3- Applies lazy-loading jQuery plugin to image elements 
    $("img.lazy-load").lazyload({ 
    effect : "fadeIn" 
    }); 
} 
Смежные вопросы