我从来不用WordPress的后台写文章,接触WordPress前我都用上了windows live writer,所以接触了WordPress之后我更加喜欢使用WLW了。
我知道WordPress的新版本支持缩略图,但是我不用此功能,为什么?因为缩略图是使用wp后台上传图片生成,而我使用WLW都是设置上传原图,不要缩略图,因为图片插入文章中前我都处理过,所以并不会太大。况且,大多数情况下,我是使用外链图片的,图片能放在其它托管处,我就尽量不往自己的主机上上传,一来省流量,而来搬家时也省点心。这样一来所谓的缩略图功能就无法使用了。我文章中的图片都是单张图片,并无法点击看大图,所以那些什么lightbox,hightslide效果我也用不到了。
但是偶尔也会出现图片大于文章所在div宽度,那就只好用css限制
img {
max-width:98%;
}
但是这样一来图片就会变形,因为高度并不会随之变化。如此要实现等比列缩小图片,就只有使用js了。
还有一个情况是我想要给每个图片加上个class标签,通过css来定义图片的样式,实现这样的功能一是可以通过php,在文章内容输出前,使用正则表达式替换添加相关标签属性,但是这样做会将所有的图片都加上class,也包括很小的表情图片,这是我不希望看到的。
所以为了满足我以上两个基本需求,就只有用JavaScript了。
我所用代码如下,并在css中定义了.sided的样式,就成了现如今你在我博客页面所看到的图片样式。
(function(){
var parent = document.getElementById("content")||0;//content为日志所在div或者所需处理图片所在div的id
if(!parent)return;
var imgs=parent.getElementsByTagName("img");
var max_size=parent.offsetWidth-10;//这里我觉得应该使用clientWidth,但在IE7下会取不到值,不知为何;使用offsetWidth有点不准确,但无所谓了
for(var i=0;i<imgs.length;i++){
if(imgs[i].offsetWidth>32){//小于32的图片比如表情就不处理了
imgs[i].className+=" sided";//加上“sided”class属性
imgs[i].style.border="2px solid #aaa";//因为WLW会强制以内联属性方式设置图片的边框值,所以这里需要强行修改
}
if(imgs[i].offsetWidth>max_size){//这里是将大于文章div宽度的图片按比列缩小并改为小图链接大图形式
var timg=document.createElement("img");//这里新建了一个图片对象,但并未添加到页面节点树中,纯粹是为了获取原始图片的高宽比
timg.src=imgs[i].src;
var s=timg.height/timg.width;
if(!s)continue;
imgs[i].width=max_size;
imgs[i].height=Math.round(imgs[i].width*s);
if(imgs[i].parentNode.nodeName.toLowerCase() != 'a'){//如果这个图片没有a链接,则给其加上链接到其本身的a链接
var imga=document.createElement("a");
imga.href=imgs[i].src;imga.target="_blank";
imgs[i].parentNode.appendChild(imga);
imga.appendChild(imgs[i]);
}
}
}
})();
将代码加到页面底部即可自动运行,如果你要使用,请配合自己模板修改第一行代码。
下面这张宽度超标的图片并无链接到大图,经过处理,会链接到它自身。如果看到图片高度为0,请刷新页面。
