A-A+

怎样限制日志内图片大小?

2008年04月22日 WordPress 暂无评论 阅读 1 次

怎样限制日志内图片大小?
在日志里含的图片 有时太大了 会撑破风格
有没有什么插件 或者在哪加行代码来限制图片最大允许的宽高 并把大于限制的缩略为定义的大小显示

1可在外观>主题编辑器里找到CCS样式表,找个地方加入如下代码
img { width: expression(this.width > 450 & this.height 450? 450: true); } //当图片大小超出450px时按450px显示.
其中450px,可以改成500,或其他的数值.
2在您发布日记图片时选折显示(版本wp2.3.2,其他版本没用过)
效果参照香浓咖啡

WordPress怎样限制日志内图片大小,这个问题如果换成是PJBlog,那就很简单了,因为内置这个功能,Z-Blog后台也有设置选项,WordPress这么强大却缺这一体贴的功能(Ps.或许我太菜,刚换成WP没发现哪里去设置)。

NEXTWAY用了2年的PJBlog,自然是比较的清楚怎么实现,不过今天在http://wordpress.org.cn 看到一位老兄的CSS方法,也是一种方法。

现将两种方法罗列一下:

1、在WordPress后台的外观编辑器里修改代码。

登录->后台->外观>主题编辑器,找到CCS样式表style.css,找个地方加入如下代码:
img { width: expression(this.width > 450 & this.height 450? 450: true); } //当图片大小超出450px时按450px显示.

注:450的数字根据主题需要相应设置。后面那句 height: expression(this.height > 450? 450: true); 我觉得可以删除,因为已经设置了width就不必再设height了,多此一举。

2、用JS来控制图片的大小。

PJBlog根目录下common文件夹下有个文件叫common.js,内有控制图片大小的一个函数:

//查找网页内宽度太大的图片进行缩放以及PNG纠正
function ReImgSize(){
for (i=0;i696)
{
document.images.width="650"
document.images.outerHTML=’’+document.images.outerHTML+’
}
}
else{
if (document.images.width>640) {
document.images.title="在新窗口打开图片"
document.images.style.cursor="pointer"
document.images.onclick=function(e){window.open(this.src)}
}
}
}
}

登录->后台->外观>主题编辑器,找到head.php文件,中文版WordPress已经把这个文件翻译成页首了,即编辑页首文件,把上面的代码,插入到header.php里的前,(2008年2月16号修改,忘记给body添加onload了-_-!)然后在下面找到body,加入上面的函数,即变成:,保存。上面代码的意思是图片超出696的大小就设置它的大小为650,你可根据主题自己相应设置。
完成。

使用感受。

第一种:
  优点:使用WordPress的博友一般都装了不少插件,加载的JS文件实在是不少,使用CSS,这是这种方法的优势,避免了由于加载大量JS,妨碍访问速度。
  缺点:把图片设置成没有超级链接的预定大小,没有了超级链接,图片缩小了,想看大图就没辙不方便了。

第二种:
  优点:第一种的缺点就是第二种的优点,图片缩小了,且带有超级链接,可以点击看大图,因为不少图缩小后看不清楚。
  缺点:第一种的优点就是第二种的缺点,需要加载JS文件或代码,一定程度上妨碍浏览速度。

两种方法各有千秋,但是经过我的测试,第一种的不能点击看大图的弊端实在是不能让人接受,用户体验不好,试想一张大图缩小了,看不清楚,想点击看大图,结果不能点,这样的体验是不能忍受的,加上第二种方法,通过一定的优化,还是可以避免的,所以NEXTWAY还是选第二种,JS方式。

[ 本帖最后由 nextway.cn 于 2008-2-16 10:10 PM 编辑 ]www.nextway.cn

请问.这个在哪里选?有这个选项吗?找了好久..
是点击插入图片里面的 显示范围设定吗? 或许是因为我装了Yapb Image插件的缘故吧,你们不防也试下

nextway.cn说到
第一种:
  优点:使用WordPress的博友一般都装了不少插件,加载的JS文件实在是不少,使用CSS,这是这种方法的优势,避免了由于加载大量JS,妨碍访问速度。
  缺点:把图片设置成没有超级链接的预定大小,没有了超级链接,图片缩小了,想看大图就没辙不方便了。

第二种:
  优点:第一种的缺点就是第二种的优点,图片缩小了,且带有超级链接,可以点击看大图,因为不少图缩小后看不清楚。
  缺点:第一种的优点就是第二种的缺点,需要加载JS文件或代码,一定程度上妨碍浏览速度。

两种方法各有千秋,但是经过我的测试,第一种的不能点击看大图的弊端实在是不能让人接受,用户体验不好,试想一张大图缩小了,看不清楚,想点击看大图,结果不能点,这样的体验是不能忍受的,加上第二种方法,通过一定的优化,还是可以避免的,所以NEXTWAY还是选第二种,JS方式。

可是我在使用过程中并没有发现不可以查看大图的现象。如:http://www.inwu114.cn/blog/wp-content/uploads/2008/01/feed/jpg就是文章图片的连接(查看时请把feed/jpg改为feed.jpg)。

附件: 您所在的用户组无法下载或查看附件

其实图片上传到yapb等类型的相册(我也是用这个相册),链接图片过来就可以选择合适的尺寸了。

像我以前也是用wp做的图片博客,基本上上传到相册的图片都已经处理成500像素宽的图片了,根本不会出现撑破风格的现象出现。

发短消息 加为好友 当前离线 10# 大 中 小 发表于 2008-2-16 22:11 只看该作者
回复 #5 leochen 的帖子
忘记给body添加onload了-_-!

登录->后台->外观>主题编辑器,找到head.php文件,中文版WordPress已经把这个文件翻译成页首了,即编辑页首文件,把上面的代码,插入到header.php里的前,(2008年2月16号修改,忘记给body添加onload了-_-!)然后在下面找到body,加入上面的函数,即变成:,保存。上面代码的意思是图片超出696的大小就设置它的大小为650,你可根据主题自己相应设置。

给我留言

Copyright © 浩然东方 保留所有权利.   Theme  Ality 07032740

用户登录

测试聊天