dede:image参数如何正确使用？

页（article_article.htm）中调用文章的缩略图。

基本语法和作用域

{dede:image} 标签通常用在内容页模板文件中，它的作用域是当前文章，也就是说，它会自动获取并显示当前正在浏览的这篇文章的缩略图。

基本语法：

{dede:image}
    <img src='[field:src /]' alt='[field:alt /]' />
{/dede:image}

简化写法（最常用）：

在实际开发中,为了方便，通常使用简化的单标签形式，直接输出图片地址。

<img src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" />

说明：

• {dede:field name='litpic'}：这是获取文章缩略图地址最直接、最常用的方法。litpic 是 DedeCMS 数据库中存储缩略图路径的字段名。
• {dede:image}...{/dede:image}：这是一个块级标签，可以在标签内部使用 [field:src]、[field:alt] 等子字段来获取图片的详细信息，它更像一个“循环”的概念，虽然缩略图只有一张，但这种写法在某些场景下（如配合样式）更灵活。

{dede:image} 标签的参数详解

{dede:image} 标签本身可以接受一些参数，用来对输出的图片进行控制，这些参数通常放在标签的后面。

基本格式： {dede:image 参数1='值1' 参数2='值2'}

以下是常用参数的详细说明：

row (整数)

• 作用：指定输出的图片数量。
• 说明：由于缩略图通常只有一张，这个参数在 {dede:image} 中使用意义不大，它的主要用途在 {dede:img} 标签（用于调用图集）中，如果在这里设置 row='2'，它仍然只会输出一张图。
• 示例：{dede:image row='1'} (默认值，可省略)

imgwidth (整数)

• 作用：设置输出图片的宽度。
• 说明：DedeCMS 会根据这个宽度和原始图片的宽高比，自动计算出相应的高度，以保持图片不变形，如果同时设置了 imgwidth 和 imgheight，则图片会被强制拉伸到指定尺寸。
• 示例：{dede:image imgwidth='200'}

imgheight (整数)

• 作用：设置输出图片的高度。
• 说明：同 imgwidth，通常建议只设置宽度或高度中的一个，让另一个自动计算，以避免图片变形。
• 示例：{dede:image imgheight='150'}

textlink (布尔值: yes 或 no)

• 作用：是否将图片包裹在一个链接中。
• 说明：
  • textlink='yes'：图片会链接到文章的正文页面。
  • textlink='no'：图片不添加链接（默认值）。
• 示例：

  {dede:image textlink='yes'}
      <a href="[field:arcurl/]"><img src="[field:src /]" alt="[field:alt /]" /></a>
  {/dede:image}

typeid (整数)

• 作用：指定调用某个栏目下的图片。
• 说明：这个参数在 {dede:image} 标签中基本无效。{dede:image} 的作用域是当前文章，无法通过 typeid 改变其数据来源，它更像是一个为其他标签（如列表页标签）准备的参数。
• 示例：{dede:image typeid='1'} (此写法无意义)

style (字符串)

• 作用：为输出的 <img> 标签添加 CSS 样式。
• 说明：这是一个非常实用的参数，可以直接在标签内定义样式，如边框、外边距等。
• 示例：

  {dede:image style='border:1px solid #ccc; margin:5px;'}
      <img src="[field:src /]" alt="[field:alt /]" />
  {/dede:image}

综合应用示例

假设我们想在内容页显示一个宽度为 300px，并带有灰色边框和 10px 外边距的缩略图，并且点击图片可以跳转到文章详情页。

使用 {dede:image} 块级标签：

{dede:image imgwidth='300' textlink='yes' style='border:1px solid #ddd; margin:10px;'}
    <img src="[field:src /]" alt="[field:title /]" />
{/dede:image}

使用 {dede:field} 单标签 (更简洁推荐)：

<a href="[field:arcurl/]" target="_blank">
    <img src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" width="300" style="border:1px solid #ddd; margin:10px;" />
</a>

分析：

• [field:arcurl/]：获取文章的链接地址。
• {dede:field name='litpic'/}：获取缩略图地址。
• {dede:field name='title'/}：获取文章标题，用作 alt 属性，有利于 SEO。
• width="300"：直接在 HTML 标签中设置宽度，同样有效。
• style="..."：直接在 HTML 标签中定义 CSS 样式。

在实际开发中,{dede:field name='litpic'} 的方式因其简洁和直观而被更广泛地使用。

常见问题与注意事项

1. 为什么我的文章没有显示缩略图？

   • 最常见原因：发布文章时，没有上传或选择缩略图，请检查后台文章编辑页的“高级选项”中“缩略图”一项是否已设置。
   • 模板问题：确保模板文件中正确使用了 {dede:field name='litpic'} 或 {dede:image}
   • 权限问题：检查 /uploads/ 目录及其子目录是否有写入权限，因为缩略图通常保存在这里。

2. {dede:image} 和 {dede:img} 的区别是什么？

   • {dede:image}：用于调用单张缩略图，作用域是当前文章。
   • {dede:img}：用于调用图集（多张图片），它会循环输出图集中的所有图片，通常与 [field:imgsrc /] 配合使用。

3. 如何获取原图地址而不是缩略图地址？

   • DedeCMS 默认不会在内容页保存原图地址，通常的流程是：上传原图 -> 后台生成缩略图 -> 保存缩略图路径。
   • 如果你需要原图,可能需要修改程序或使用其他方法，通过修改缩略图字段 litpic 的值，使其指向原图，或者在上传时同时记录原图路径到自定义字段中。