缩略图概述
织梦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),保持页面布局整齐。