织梦cms首页调用栏目图片

织梦CMS首页调用栏目图片的方法

在首页展示栏目分类入口图片是电商和门户网站的常见设计。织梦CMS通过channel标签配合[field:typeimg/]即可实现。

一、基本调用代码

{dede:channel type='top' row='8'}
<div class="cate-item">
<a href="[field:typelink/]">
<img src="[field:typeimg/]" alt="[field:typename/]">
<span>[field:typename/]</span>
</a>
</div>
{/dede:channel}

二、使用channelartlist调用

{dede:channelartlist row='6'}
<div class="cate-box">
<a href="{dede:field name='typeurl'/}">
<img src="{dede:field name='typeimg'/}" alt="{dede:field name='typename'/}">
</a>
<h3>{dede:field name='typename'/}</h3>
</div>
{/dede:channelartlist}

三、配合默认图片处理

{dede:channel type='top' row='8'}
<img src="[field:typeimg/]" 
onerror="this.src='/images/default_cate.png';this.onerror=null;">
{/dede:channel}

四、图片尺寸统一适配CSS

.cate-item img{width:60px;height:60px;object-fit:cover;border-radius:8px;}
@media(max-width:768px){.cate-box{display:flex;flex-wrap:wrap;gap:10px;}
.cate-box .cate-item{width:25%;}}