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

所属分类: dedecms / CMS教程 阅读数: 848
收藏 0 赞 0 分享

dede列表页缩略图大小控制的方法,列表开始

织梦模板在制作过程中经常会有列表页中调用图片作为缩略图的情况,这里的缩略图都是默认就设置好的,如果想要更改这里缩略图大小,还要更改一些参数,要么就要在调用的时候控制图片的大小。

在调用织梦图片的时候使用的

src='{@me['litpic'] } '

[field:litpic/]

也可以在调用的时候就加上控制的大小,

<a href="mailto:src='{@me['litpic'] } '"><img src='{@me['litpic'] } ' imgwidth='300' imgheight='370' /></a>

在模板中想要更改图片的大小还是要用css来控制,这里有两个方法:

(一)用css中的样式大小控制,打开templets/style/picture.css文件

pic 样式

.pic dl dt{
width:188px;
height:132px;
display:block;
overflow:hidden;
}
.pic 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;
}

这样只要在调用图片的时候给图片一个pic的属性就可以了,这样调用出来的图片就可以受到控制了。

(二)直接用缩略图的大小进行控制

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

也可以把调用代码中标签[field:imglink/]换成

<a href='[field:arcurl /]' target="_blank"><img src='[field:picname /]' border='0' width='' height=''></a>

完成。


复制代码
代码如下:

{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/]</a> ---这里控制的是标题,标题链接----
<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 }

如果要控制图片的高度需要修改:

方法1:

这个模板的图片大小控制是由CSS控制的
要修改CSS
右边图片区域修改
templets/style/picture.css文件
.pbox 样式
如图片大小
.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;
}

方法2:

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

方法3:

把调用代码中标签[field:imglink/]换成
<a href='[field:arcurl /]' target="_blank"><img src='[field:picname /]' border='0' width='' height=''></a>
 

更多精彩内容其他人还在看

dedecms编码转换方法 gbk转UTF-8,UTF-8转GBK(推荐)

经常遇到编码转换的问题,有的是购买了模板但是模板编码与程序编码不符,导致出现乱码.今天小编给大家分享一篇教程帮助大家解决如何转换模板文件的编码和程序的编码问题,一起看看吧!1.如何转换模板文件编码?首先下载一个编码转换软件软件名称:51EC模板转码专用工具v1.0免费版(utf8... 查看详情
收藏 0 赞 0 分享

DEDECMS实现多行导航菜单栏的实现方法

实现织梦dedecms模板的多行导航菜单需要分两个步骤进行。首先改图片。\templets\images\header_bg.png用PHOTOSHOP更改成你喜欢的导航栏样式。最简单偷懒的方法是打开这个图片然后选中底下那一段大约33象素的图,重新生成一个33象素的图片即可。或者... 查看详情
收藏 0 赞 0 分享

织梦Dedev5.6中的跨站漏洞的修复实例方法

注意:织梦Dedev5.6 中的跨站漏洞的修复方法。修改templets\default\search.htm文件第43行,找到 {dede:pagelist listsize='4'/}修改为{dede:pagelist listsize='4' function=R... 查看详情
收藏 0 赞 0 分享

织梦开发中给网站的评论框加上个图片背景的方法

最近想给织梦dedecms网站的背景进行更换,突然想到,如何更换评论框的背景呢?经过一些尝试,终于找到了修改方法:在评论框上加个属性:以下为引用的内容:<textarea name="msg" rows="5" cols="... 查看详情
收藏 0 赞 0 分享

织梦CMS实现会员审核功能的方法

中默认是没有会员审核功能的,那么如何实现会员审核呢?现在就给大家一个实现的方法,如下:织梦dedecms会员管理 - 会员权限管理 -里面新增加一个会员级别新建一个会员级别之后,在 会员权限管理 里面,找到新建的哪个级别把鼠标放在 具体权限 在浏览左下角有一行字符,ID后面的数字... 查看详情
收藏 0 赞 0 分享

godday虚拟主机织梦CMS出现Internal Server Error解决方法

最近在用godday空间的时候 遇到这个问题 更新的时候出现 ,Internal Server Error ...错误在多方求证 后找到有人 给Godaddy 求助完美解决“感谢你们的支持联系托管。我会建议更改为不使用的PHP FastCGI的。您可以通过进入控制中心... 查看详情
收藏 0 赞 0 分享

详解织梦CMS自动清除文章内段落标签的调用方法

织梦DEDECMS自动清除文章内段落p标签样式而保留p标签的方法:今天在发布文章时发现,从别处复制过来的文字,自带的样式,特别是采集过来的内容,因为采集时没有做好标签的过滤,导致内容在我们网站上出现网页结构错乱,如下图如果放在编辑器里清除样式后,又全部变成<br/>,... 查看详情
收藏 0 赞 0 分享

织梦dedecms富文本内容中屏蔽标签实例代码

文章的body字段屏蔽a标签和iframe标签{dede:field.body runphp="yes"} $str=@me; @me=''; $str1=''; $str1 = preg_replace( "@<ifr... 查看详情
收藏 0 赞 0 分享

dedecms里针对搜索发布可搜多关键词及定栏目搜索的方法

织梦dedecms针对搜索发布可搜多关键词及定栏目搜索。<input type="hidden" name="kwtype" value="0"> <input type="hidden&qu... 查看详情
收藏 0 赞 0 分享

dedecms数据库文件出错的修复方法

今天在学习织梦dedecms数据库文件相关操作时,不知道什么原因,发现一个文件出错,为了修复这个文件,确实下了一些功夫,终于找到两个操作方法,发出来,供大家学习。出错表名:dede_archives出错提示:Can’t open file: ‘dede_a... 查看详情
收藏 0 赞 0 分享
查看更多