我有一个Wordpress博客,我正试图实现foresight.js图像脚本。简而言之,我需要针对所有帖子图像,用data-src, data-width, & data-height
属性交换src, width, & height
属性。然后,我需要复制图像行并将其包装在<noscript>
标签中。这是我想让Wordpress生成/创建的结构:
<img data-src="wordpress/image/url/pic.jpg" data-width="{get width of image with PHP & pass-in that value here} data-height="{get height of image with PHP and pass-in that value here}" class="fs-img">
<noscript>
<img src="wordpress/image/url/pic.jpg">
</noscript>
更多信息可以在foresight.js的网站上找到。
我已经搜索了Wordpress codex,我能找到的最好的方法是使用过滤器(即。"get_image_tag",'image_tag')用于修改Wordpress为每个图像输出的html。我认为这些选项之一应该工作,或者我可以做一些模式匹配与regex (我知道,不理想),扔进一个preg_replace
,然后将其注入the_content
过滤器。
我已经尝试了一些这些选项,但不能得到任何工作。有人能帮帮忙吗?
get_image_tag的尝试:
在网上找到了这个特殊的,但它需要修改以适应我的逻辑(见上面的结构)…我无法理解preg_replace
数组在做什么。
<?php function image_tag($html, $id, $alt, $title) {
return preg_replace(array(
'/'.str_replace('//',''/'/',get_bloginfo('url')).'/i',
'/'s+width="'d+"/i',
'/'s+height="'d+"/i',
'/alt=""/i'
),
array(
'',
'',
'',
alt='"' . $title . '"'
),
$html);
}
add_filter('get_image_tag', 'image_tag', 0, 4);
?>
另一个'get_image_tag'尝试:
<?php function get_image_tag($id, $alt, $title, $align, $size='full') {
list($width, $height, $type, $attr) = getimagesize($img_src);
$hwstring = image_hwstring($width, $height);
$class = 'align' . esc_attr($align) . ' size-' . esc_attr($size) . ' wp-image-' . $id;
$class = apply_filters('get_image_tag_class', $class, $id, $align, $size);
$html = '<img src="' . esc_attr($img_src) . '" alt="' . esc_attr($alt) . '" title="' . esc_attr($title).'" data-width="' . $width . '" data-height="' . $height . '" class="' . $class . ' fs-img" />';
$html = apply_filters( 'get_image_tag', $html, $id, $alt, $title, $align, $size);
return $html;
}
?>
模式匹配的尝试:
尝试在这个上创建我自己的正则表达式,但不确定是否正确。
<?php function restructure_imgs($content) {
global $post;
$pattern = "/<img(.*?)src=('|'")(.*?).(bmp|gif|jpeg|jpg|png)(|'")(.*?)>/i";
list($width, $height, $type, $attr) = getimagesize($2$3.$4$5);
$hwstring = image_hwstring($width, $height);
$replacement = '<img$1data-src=$2$3.$4$5 title="'.$post->post_title.'" data-width="'.$width.'" data-height="'.$height.'" class="fs-img"$6>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'restructure_imgs');
?>
不幸的是,我不能让这些例子中的任何一个工作。任何帮助或分享您预先编写的脚本/功能将非常感激!谢谢你帮助一个学生学习!!
你的方法是在页面渲染之前,我认为在wordpress中不是不可能的,但是你可以在页面用javascript渲染之后做同样的。我试着用jQuery这样做,它似乎工作:
<!-- Example image -->
<img src="http://fotografia.deagostinipassion.com/resources/photos/2/2n/ilCielo.JPG" width="200px" height="300px">
<!-- Import jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("img").wrap(function() {
$(this).wrap(function() {
var newimg = '<img data-src="' + $(this).attr('src') + '" data-width="' + $(this).attr('width') + '" data-height="' + $(this).attr('height') + '" class="fs-img">';
return newimg;
});
return '<noscript>';
});
});
</script>
如果你需要更多的帮助,尽管问我。