M1850资源网 - 最专业的网站源码模板下载站!

全部作品
全部作品
织梦模板
网站模板
源码插件
游戏源码
脚本特效
视频教程
建站教程
M1850资源网 > 建站教程 > 织梦教程 > DEDE教程 > 织梦列表页缩略图大小控制的方法

推荐下载

织梦列表页缩略图大小控制的方法

  织梦DedeCMS的缩略图功能还是比较强大的,不过织梦DedeCMS默认的缩略图是把图片缩放到指定的大小比例,这样就会造成缩略图被拉伸等而失真,关于织梦DedeCMS缩略图失真的解决办法,织梦DedeCms5.7缩略图变形解决方法一文,原理是把织梦DedeCMS的缩略图处理方式改为截取。

  不过我们在使用织梦DedeCMS制作网站的时候,还需要考虑到缩略图大小问题,很多地方使用织梦DedeCMS缩略图是大小不一致的,比如列表页的缩略图和首页幻灯的缩略图等。怎么控制织梦DedeCMS缩略图的大小呢?

  下面以织梦DedeCMS列表页面的缩略图为例说明,以下为织梦DedeCMS默认列表页面缩略图部分的代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 {dede:list pagesize='10'} <!--调用的条数10条--> <li> [field:array runphp='yes']@me = (empty(@me['litpic']) ? "" : "<a <a href="mailto:href='{@me['arcurl']}'">href='{@me['arcurl']}'</a> class='preview'><img <a href="mailto:src='{@me['litpic']}'/></a">src='{@me['litpic']}'/></a</a>>"); [/field:array] <!--这里控制的是缩略图--> <!--如果要控制图片的高度需要修改: <img <a href="mailto:src='{@me['litpic']}'">src='{@me['litpic']}'</a> 这里现在的是宽度: img <a href="mailto:src='{@me['litpic']}'">src='{@me['litpic']}'</a> iwidth='300' height='370' 这里控制了宽度的大小,以及高度 --> [<b>[field:typelink/]</b>] <!--这里控制的是栏目--> <a href="[field:arcurl/]" class="title">[field:title/] <!--这里控制的是标题,标题链接--> <span class="info"> <!--这里控制的是描述--> <small>日期:</small>[field:pubdate function="GetDateTimeMK(@me)"/] <small>点击:</small>[field:click/] <small>好评:</small>[field:scores/] </span> <p class="intro"> [field:description/]... </p> <!--描述--> </li> {/dede:list}

  果要控制上述代码中图片的大小,有以下的两种方法可供参考,一种是在CSS样式中控制,规定图片的高度、宽度等信息,默认模板可以使用下面的css代码控制:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 .pbox dl dt{ width:188px; height:132px; display:block; overflow:hidden; } .pbox dl dt a img{ display:block; width:expression(this.width > this.height && this.width >176 ? 176 : true); height:expression(this.height > this.width && this.height > 132? 132 : true); max-width:176px; max-height:132px; margin:0px auto 0px; }

  另一种方法是在织梦DedeCMS的标签中,有控制缩略图大小的属性,完善相关的属性即可,代码如下:

1 {dede:list pagesize='15' imgwidth='100' imgheight='70' infolen='180'}

  织梦DedeCMS默认的缩略图功能还是不够完善,不能生成各种类型的缩略图以供选择,这点是可以完善的。希望织梦DedeCMS的下一个版本中,能够支持生成多类型的缩略图。

嘿,我来帮您!

展开