DX门户频道文章图片封面列表模板及完整教程

DX默认的门户文章列表是“标题+摘要+封面”的显示方式，本模板可以实现文章列表按封面图片(即缩略图)以矩阵排列方式显示，适合用门户功能的图片类站点或需要以封面为主要显示方式站点。封面可以在你上传的图片附件中选择，封面自动裁切原始图不会有水印，有管理权限的ID登陆会显示编辑和删除链接。演示地址：http://www.tm13168.com/mmjq/


捕获2.JPG (190.45 KB, 下载次数: 19)
下载附件  保存到相册

2013-7-18 23:25 上传

捕获3.JPG (148.45 KB, 下载次数: 8)
下载附件  保存到相册

2013-7-18 23:25 上传

实现步骤：

1、首先开启门户缩略图，大小我这边用的是168×126

捕获4.JPG (60.97 KB, 下载次数: 8)
下载附件  保存到相册

2013-7-18 23:25 上传

2、可以将缩略图质量适当修改，我用80，80的质量168×126的图片几乎看不出有什么影响，这样生成的缩略图容量比较小

捕获5.JPG (80.55 KB, 下载次数: 10)
下载附件  保存到相册

2013-7-18 23:25 上传

3、我右侧边栏宽度是250像素，DX默认的220像素什么广告都不合适放，因此需要改下控制边栏的CSS代码，打开文件template\default\common\common.css，找到以下代码

• .ct2 .mn { float: left; width: 730px; margin-bottom: 1em; }
• .ct2 .sd { float: right; width: 220px; overflow: hidden; _overflow-y: visible; }
  

复制代码
将220改为250，同样730改为700

4、将以下文章图片封面列表模板用到的CSS代码复制粘贴到template\default\common\common.css的最后

• /*0512dz.com门户频道文章图片列表*/
• .mydl_width{height:auto;padding:12px 0;background-color:#EBF5EC}
• .mydl_width ul{ margin:0;padding:0;}
• .myul{}
• .myul li{width:220px;height:auto;display:block;float:left; margin-left:10px;margin-bottom:5px; text-align:center;}
• .myli{}
• .myh3{width:210px;height:50px;min-height:20px;line-height:22px;text-align:center;margin-top:3px;font-size:12px;}
• .myliimg img{padding: 5px; width: 168px; height: 126px; border: 1px solid #CCC; background: {WRAPBG}; }
  

复制代码
以上代码可控制图片、标题的宽度高度，边框，背景等，当然也可以实现一行显示两张图片封面或四张图片封面等，懂CSS的一看就知道

5、将门户图片封面列表模板文件放到template\default\portal下，更新缓存
请到这里下载，免费的
http://www.tm13168.com/forum.php/forum.php?mod=viewthread&tid=209&extra=   

6、在后台频道详细设置里的列表页模板名中选择昆山打折网门户文章图片列表，每页显示文章数填好适合你的数字

谢谢分享！支持




www.mianfeihu.com
www.58yingshi.com
www.7yeba.com
www.mianfeihu.com