帝国cms列表页的缩略图呈现方,你可能需要实现的效果是——无图片让其隐藏。
一种办法是全靠 CSS 控制显示,适合响应式布局
$str = '
<li class="item clearfix">
<div class="item-inner">
<div class="media">
<a href="[!--titleurl--]">
<img src="[!--titlepic--]" class="feedimg" style="'.($r['titlepic']?'':'display:none').'">
</a>
</div>
<div class="content">
<h3><a href="[!--titleurl--]">[!--title--]</a></h3>
<p>[!--smalltext--]</p>
</div>
</div>
</li>';
但是,这种方案,图片地址仍然会出现在最终 HTML 中。
只是是否显示由 CSS / style 控制,而不是由 PHP 决定是否输出 <img>。 src 仍然存在,只是被 CSS 隐藏了, 并不是「不输出图片标签」,不适合 CMS 对SEO高要求的场景.
另一种是「没有图片时,连 img 都不出现」 前端最友好的写法(推荐)
$hasPic = !empty($r['titlepic']);
$str = '
<li class="item clearfix" data-node="item">
<div class="item-inner">
'.($hasPic ? '
<div class="lbox left">
<a href="[!--titleurl--]" target="_blank">
<img class="feedimg lazy"
src="[!--titlepic--]"
loading="lazy">
</a>
</div>' : '').'
<div class="rbox '.($hasPic ? '' : 'no-img').'">
...
</div>
</div>
</li>';
CSS 示例: ——(效果图,可以看上海好生活任一栏目)
float: left;
width: 120px;
}
.item .rbox {
margin-left: 140px;
}
.item .rbox.no-img {
margin-left: 0;
}
注意事项:记得开启模板支持程序代码,而且在列表内容模板(list.var) (*)中相应位置勾选。
