首页 > 经验教程 > Dedecms内容页图片过大 宽度缩小高度自动按比例缩小
2013三月17

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

2013-03-17 21:18 | 作者:无天 | 分类:经验教程 | 浏览: 22890 Views 7评论 发表评论

用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才会起作用,将图片缩小。

除非注明,文章均为无天博客原创,转载请以链接形式注明出处,谢谢。
本文地址:http://www.wutiansem.com/201303171122.html
标签:

7 Responses to “Dedecms内容页图片过大 宽度缩小高度自动按比例缩小”

  1. #1 丰禾棋牌 回复 | 引用 Post:2013-04-23 16:57

    首面的图片还是不要弄的太大

  2. #2 广州天猫代运营 回复 | 引用 Post:2013-04-23 10:18

    谢谢分享!!!!!!!!!

  3. #3 八度网 回复 | 引用 Post:2013-04-16 13:19

    八度网过来帮顶!www.bdz.cc

  4. #4 hostgator 回复 | 引用 Post:2013-04-09 15:00

    内容分享的好独特,来学习一下

  5. #5 杭州养生保健 回复 | 引用 Post:2013-04-02 19:32

    我会常来的 谢谢博主教导!!

  6. #6 净水器 回复 | 引用 Post:2013-03-20 15:09

    不错的网站,朋友介绍,顺道过来支持下!!!

  7. #7 跑步机 回复 | 引用 Post:2013-03-17 23:11

    DEDE太容易破解了

发表评论