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

yuanma

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





实现步骤：

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


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


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; }
  

[color=rgb(51, 102, 153) !important]复制代码
将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}; }
  

[color=rgb(51, 102, 153) !important]复制代码
以上代码可控制图片、标题的宽度高度，边框，背景等，当然也可以实现一行显示两张图片封面或四张图片封面等，懂CSS的一看就知道

5、将门户图片封面列表模板文件放到template\default\portal下，更新缓存
list_pic.rar (1.38 KB, 下载次数: 10470)

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

oe63r7520c

支持！！！！！！

柯雅懿

不错不错 支持下

鲁梓云

学习了，这就去试试

裘云水

很不错的哦，支持，加油

厉翔

赞一个!

白云英

前来围观，LZ好样的！

ryrbvohijd

支持！！！！！！

ryrbvohijd

支持你们一下下哈

西门善芳

前来围观，LZ好样的！