扫一扫加微信
当前位置：无天博客 > 网站建设 > 正文

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

  • 无天 发布于 2013-03-17 21:18:51
  • 分类：网站建设
  • 阅读(1497)
  • 评论(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调用代码
  13. $suolue=’onload=”javascript:ImgReSize(this)”‘;
  14. $this->Fields[‘body’]
  15. = str_ireplace(“<img ” ,”<img “.$suolue.”
  16. “,$this->Fields[‘body’]);
  17. //屏蔽height属性
  18. $this->Fields[‘body’] =
  19. preg_replace(‘/<img(.+?)height=(.+?)
  20. (.+?)>/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才会起作用，将图片缩小。

相关推荐

7 评论

2+3=

  1. 丰禾棋牌

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

    回复
  2. 广州天猫代运营

    谢谢分享！！！！！！！！！

    回复
  3. 八度网

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

    回复
  4. hostgator

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

    回复
  5. 杭州养生保健

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

    回复
  6. 净水器

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

    回复
  7. 跑步机

    DEDE太容易破解了

    回复

最新文章

推荐阅读

热门标签

最新评论