帝国cms列表页缩略图呈现方式问题-无图片让其隐藏

2026-04-21 11:45 yb

帝国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 示例: ——(效果图,可以看上海好生活任一栏目)
.item .lbox {
    float: left;
    width: 120px;
}

.item .rbox {
    margin-left: 140px;
}

.item .rbox.no-img {
    margin-left: 0;
}
好处是:有图 / 无图布局完全独立​ ✅ 不会出现错位、塌陷、留白异常。
注意事项:记得开启模板支持程序代码,而且在列表内容模板(list.var) (*)中相应位置勾选。
【收藏本页】Ctrl+D或转到
相关阅读

意见反馈

© 2017-2026 上海好生活 https://www.zhaozhishi.net/
上海生活网站是上海分类信息平台之一,便民信息和免费信息发布