织梦cms栏目缩略图设置

缩略图概述

织梦CMS中的缩略图(litpic)是文章列表和推荐区块中展示的预览图片。通过 [field:litpic/] 标签和配套参数可以调用和加工缩略图。不同栏目可以设置不同的缩略图尺寸和默认图片。

一、系统级缩略图设置

<!-- 系统 > 系统基本参数 > 附件设置 -->
缩略图默认宽度:   300 px
缩略图默认高度:   200 px
缩略图生成质量:   85(0-100)
缩略图存储目录:   /uploads/allimg/
是否自动生成缩略图:是

二、模板中调用缩略图

<!-- 基础缩略图调用 -->
{dede:arclist typeid='3' row='10' flag='p'}

<!-- 指定缩略图尺寸 -->
{dede:arclist typeid='3' row='10' 
  imgwidth='200' imgheight='150'}

<!-- 单独调用缩略图字段 -->
[field:litpic/]

<!-- 调用时设置默认图片 -->
<img src="[field:litpic/]" 
     onerror="this.src='/images/default.jpg'" 
     alt="[field:title/]">

三、不同栏目使用不同缩略图尺寸

<!-- 栏目页根据不同栏目ID设定缩略图大小 -->
{dede:php}
$typeid=$refObj->TypeLink->TypeInfos['id'];
$thumbSizes=array(
    3=> array('w'=>300, 'h'=>200),  // 新闻栏目
    5=> array('w'=>200, 'h'=>200),  // 图片栏目(正方形)
    8=> array('w'=>400, 'h'=>250),  // 下载栏目(大图)
);
$size=$thumbSizes[$typeid] ?? ['w'=>300, 'h'=>200];
{/dede:php}

{dede:arclist typeid='{dede:field.id/}' row='12' flag='p'}
<div class="card">
  <a href="[field:arcurl/]">
    <img src="[field:litpic/]" alt="[field:title/]" 
         style="width:{$size.w}px;height:{$size.h}px;object-fit:cover;">
    <span>[field:title/]</span>
  </a>
</div>
{/dede:arclist}

四、缩略图裁剪模式

<!-- CSS object-fit实现不同裁剪效果 -->
<style>
/* 填充裁剪(保持比例填满容器) */
.thumb-cover img{width:100%;height:200px;object-fit:cover;}

/* 完整显示(保持比例完整显示) */
.thumb-contain img{width:100%;height:200px;object-fit:contain;}

/* 无裁剪(拉伸变形) */
.thumb-fill img{width:100%;height:200px;object-fit:fill;}
</style>

五、批量生成缩略图

<?php
// 批量为栏目文章重新生成缩略图
require_once(dirname(__FILE__)."/include/common.inc.php");
require_once(DEDEINC."/image.func.php");

$typeid=3; // 目标栏目ID
$width=300;
$height=200;

$sql="SELECT id, litpic FROM dede_archives 
        WHERE typeid={$typeid} AND litpic !=''";
$dsql->SetQuery($sql);
$dsql->Execute();

while($row=$dsql->GetArray()){
    $srcFile=dirname(__FILE__).$row['litpic'];
    if(file_exists($srcFile)){
        $newFile=str_replace('.', '_thumb.', $srcFile);
        ImageResize($srcFile, $width, $height, $newFile);
        echo "已生成缩略图:{$row['litpic']}\n";
    }
}
?>

六、文章无缩略图时的自动提取

<!-- 内容页提取正文第一张图片作为缩略图 -->
{dede:field name='litpic' runphp='yes'}
if(empty(@me)){
    $aid=$refObj->Fields['id'];
    $row=$dsql->GetOne("SELECT body FROM dede_addonarticle WHERE aid={$aid}");
    preg_match('/]+src="([^"]+)"/i', $row['body'], $matches);
    @me=$matches[1] ?? '/images/no-image.jpg';
    
    // 将提取的图片更新为缩略图
    if(!empty($matches[1])){
        $dsql->ExecuteNoneQuery(
            "UPDATE dede_archives SET litpic='{$matches[1]}' WHERE id={$aid}"
        );
    }
}
{/dede:field}
性能优化:缩略图文件不宜过大,建议控制在50KB以内。对于图片密集型栏目,使用CDN加速图片加载。列表页的缩略图建议使用统一的宽高比(如16:9或4:3),保持页面布局整齐。