dede文章缩略图尺寸如何自定义调整？

1. 后台设置：控制缩略图上传时的默认尺寸和裁剪方式。
2. 前台调用：在模板文件中通过标签控制最终显示的尺寸。

后台设置（控制上传和生成）

这是最核心的设置，它决定了你上传图片后,系统会自动生成多大的缩略图。

进入设置路径

登录你的 DedeCMS 后台，依次点击： 系统 -> 系统基本参数 -> 核心设置

找到相关参数

在“核心设置”页面中,找到以下几个关键参数：

重点解释：缩略图类型（第6点）

这个参数直接影响了缩略图的显示效果,请务必理解：

• 0 - 等比例缩放，不裁剪

  
  （图片来源网络，侵删）
  • 效果：图片会完整显示，保持原始宽高比，如果图片尺寸和你设置的尺寸比例不一致，缩略图四周会留有空白（通常是黑色或白色）。
  • 适用场景：当图片主体必须在完整展示时使用，比如文章配图,不希望裁剪掉重要部分。

• 1 - 等比例缩放，居中裁剪

  • 效果：这是最常用的设置，系统会先等比例缩放图片，使得图片的较长边（宽度或高度）达到或超过你设置的尺寸,然后从中心位置裁剪出你指定大小的图片。
  • 适用场景：列表页、首页等需要统一尺寸的缩略图展示，可以保证所有缩略图大小完全一致,非常整齐。

• 2 - 固定宽度，高度按比例

  • 效果：只保证缩略图的宽度是你设置的值,高度会根据原始图片的宽高比自动计算。
  • 适用场景：在瀑布流布局等需要不同高度的场景下使用。

强烈建议： 大多数情况下，将“缩略图默认类型”设置为 1,可以获得最整齐的列表页效果。

前台调用（控制显示尺寸）

后台设置的是“生成”时的尺寸，但在模板文件中，你可以通过修改标签属性来“覆盖”这个显示尺寸,让同一张缩略图在不同地方显示不同的大小。

基本缩略图调用标签

在 DedeCMS 的模板文件（如 list_article.htm, article_article.htm）中,调用文章缩略图的基本标签是：

{dede:field name='litpic' /}

这个标签会直接输出后台设置生成的缩略图路径。

使用 <img> 标签控制显示大小

为了控制显示尺寸，我们通常将这个标签包裹在 <img> 标签中，并使用 width 和 height 属性。

示例：在列表页显示缩略图

假设你的列表模板文件是 list_article.htm，找到循环文章列表的部分（{dede:list} 或 {dede:arclist}）,修改如下：

{dede:list pagesize='10'}
    <li>
        <!-- 使用img标签，并设置width和height来控制显示大小 -->
        <!-- 这里设置为200x200像素显示 -->
        <img src="[field:litpic/]" width="200" height="200" alt="[field:title function='html2text(@me)'/]" />
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:list}

重要提示：

• width 和 height：这两个属性是告诉浏览器“用多大尺寸来显示这张图片”,浏览器会按照这个尺寸拉伸或压缩图片。
• alt 属性：为了 SEO 优化和无障碍访问，请务必为图片添加 alt 属性,内容通常是文章标题。
• 路径问题：[field:litpic/] 输出的是相对路径（如 /uploads/allimg/230510/1-2305101H3120-50.jpg），如果你的网站部署在子目录，或者需要确保路径绝对正确，可以使用 global.cfg_basehost 变量来拼接完整URL：

  <img src="{dede:global.cfg_basehost/}[field:litpic/]" width="200" height="200" alt="[field:title function='html2text(@me)'/]" />

高级用法：自定义缩略图尺寸

如果你希望生成不同尺寸的缩略图（一个用于列表大图，一个用于相关文章小图），而不影响后台默认设置,可以这样做：

第一步：修改后台模型

1. 进入 后台 -> 核心 -> 内容模型管理 -> （选择你的文章模型，如“文章”）。
2. 点击“字段管理”，找到“缩略图”字段。
3. 在字段设置中，你可以添加“缩略图规则”，例如添加一个名为 small 的小图规则，设置宽高为 100x100。
4. 保存后,系统会在上传图片时根据这个规则生成新的缩略图。

第二步：前台调用

在模板中，通过 addfields 和 channelid 等属性来调用这个自定义的缩略图。

<!-- 调用名为 'small' 的缩略图，显示为 100x100 -->
{dede:arclist typeid='1' row='5' addfields='litpic_small'}
    <li>
        <img src="[field:litpic_small/]" width="100" height="100" alt="[field:title function='html2text(@me)'/]" />
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}

这种方法更灵活，但配置也更复杂，对于大多数网站，直接通过前台 <img> 标签的 width 和 height 属性来控制显示大小就足够了。

总结与最佳实践

1. 统一后台设置：进入 系统 -> 系统基本参数 -> 核心设置，将 “缩略图默认宽度和高度” 设置为你网站列表页最常用的尺寸（如 280x280），并将 “缩略图默认类型” 设置为 1（等比例裁剪）,这样能保证所有新上传的图片都会生成一个标准的缩略图。

2. 灵活前台调用：在模板文件中，使用 <img src="[field:litpic/]" width="xxx" height="xxx" /> 的方式来控制缩略图在具体位置的显示大小，如果某个地方需要特殊尺寸，直接修改 width 和 height 的值即可。

3. 保持一致性：尽量让 width 和 height 的值成比例，避免图片被过度拉伸导致变形，后台设置的是 280x280（1:1），那么前台调用时也尽量使用 200x200 或 150x150 这样的等比尺寸。

通过以上两步结合，你就可以完全掌控 DedeCMS 文章缩略图的大小了。