Dedecms内容页图片过大 宽度缩小高度自动按比例缩小

用Dedecms程序搭建的网站,发表文章,或者采集过来的文章,图片往往会太大,超过了容纳内容的框架,从而导致页面混乱。懂CSS的朋友估计会给内容页的图片设定一个宽度值,但是这样的话采集过来的小张图片会随着这个设定的值而变大,图片就会变得模糊了;网上其他网友分享的方法,很多都只是把宽度缩小,而高度没有按比例缩小,那么这种情况就会造成图片变形了,特别是对一些比较长的图片,就会变形很厉害了。
那么我们能不能既缩小宽度,又让高度按比例自动缩小,保持图片的美观性呢?答案当然是可以的,下面我们就来介绍一下方法:
首先,我们找到 include/arc.archives.class.php 文件找到下面的代码:

  1. //设置全局环境变量
  2. $this->Fields[‘typename’] =
  3. $this->TypeLink->TypeInfos[‘typename’];
  4. @SetSysEnv($this->Fields[‘typeid’],$this->Fields[‘typename’],$this->Fields[‘id’],$this->Fields[‘title’],’archives’);

复制代码

在下面加入以下代码:

  1. //替换图片Alt为文档标题
  2. $this->Fields[‘body’] =
  3. str_ireplace(array(‘alt=””‘,’alt=\’\”),”,$this->Fields[‘body’]);
  4. $this->Fields[‘body’]
  5. = preg_replace(“@
  6. [\s]{0,}alt[\s]{0,}=[\”‘\s]{0,}[\s\S]{0,}[\”‘\s]
  7. @isU”,”
  8. “,$this->Fields[‘body’]);
  9. $this->Fields[‘body’] =
  10. str_ireplace(“<img ” ,”<img
  11. //img标签中加入超宽缩小JS调用代码
  12. $suolue=’onload=”javascript:ImgReSize(this)”‘;
  13. $this->Fields[‘body’]
  14. = str_ireplace(“<img ” ,”<img “.$suolue.”
  15. “,$this->Fields[‘body’]);
  16. //屏蔽height属性
  17. $this->Fields[‘body’] =
  18. preg_replace(‘/<img(.+?)height=(.+?)
  19. (.+?)>/i’,”<img$1$3>”,$this->Fields[‘body’]);

复制代码

第二步:打开你前台文章页模版 默认的是:/templets/default/article_article.htm (有的朋友,仿完站,内容页的模版未必是这个默认的)打开模版后将下面代码插入到<head> </head> 中 ,注意那个670的数值,这个值意思是当图片超过这个数值,自动将图片缩小,宽度缩小为670,高度自动按比例缩小,这样不会变型。

  1. <script language=’javascript’>
  2. function
  3. ImgReSize(e)
  4. {
  5. if(e.width>670) //
  6. 670可根据你文章的内容区域大小,可调整
  7. {
  8. e.width=670; //
  9. 等同上面你设的那个数值
  10. e.style.width=””;
  11. }
  12. if(e.height>10)
  13. {
  14. e.style.height=””;
  15. }
  16. }
  17. </script>

复制代码

到这里,就设定完了,去后台生成一下所有的文章,就可以把内容页的图片自动缩小了。如果你懂CSS最好找到 内容区域的CSS,将它的宽设定好,然后定义一下,超出部分隐藏,因为有时候,文章在加载的过程中,显示的是你原始大小,加载完成后,JS才会起作用,将图片缩小。

赞 (0)

评论 7

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 丰禾棋牌首面的图片还是不要弄的太大回复
  2. 广州天猫代运营谢谢分享!!!!!!!!!回复
  3. 八度网八度网过来帮顶!www.bdz.cc回复
  4. hostgator内容分享的好独特,来学习一下回复
  5. 杭州养生保健我会常来的 谢谢博主教导!!回复
  6. 净水器不错的网站,朋友介绍,顺道过来支持下!!!回复
  7. 跑步机DEDE太容易破解了回复