页自定义图片字段怎么用？

第一步：在后台添加自定义图片字段

这一步的核心是告诉织梦CMS,我们的文章模型需要一个专门用来存放图片的字段。

进入模型管理

1. 登录你的织梦CMS后台。
2. 在左侧菜单栏中,找到并点击 【核心】 -> 模型管理】。

选择并修改文章模型

模型管理页面,你会看到系统默认的模型，文章模型”，点击其右侧的 【字段管理】。

添加新字段

1. 进入字段管理页面后,点击右上角的 【添加新字段】 按钮。

填写字段信息（关键步骤）

这是最核心的一步,请仔细填写以下信息：

• 字段名称: custom_image (建议使用英文或拼音，方便调用，不能使用数字开头)
• 字段提示: 自定义图片 (这个会在后台发布文章时显示在输入框上方，作为提示)
• 字段类型: 【图片(单选)】 (这是最重要的选择，因为我们只需要一张图片)
• 字段大小: 255 (默认即可，用于存储图片路径)
• 表单元素样式: 【上传图片】 (选择这个，后台会提供一个美观的上传按钮)
• 是否为空: 【否】 (根据需要，如果这个图片是必须的，就选否；可选则选是)
• 默认值: 留空
• 字段分组: default (使用默认分组即可)
• 显示顺序: 10 (数字越小，在后台表单中越靠前)

【高级选项】 (如果不需要特殊效果，可以保持默认或忽略)

• 自动创建缩略图: 【不生成】 (因为我们通常只需要一张原图，如果需要多张尺寸，这里可以设置，但单图字段一般不需要)。
• 远程站点: 【不选择】 (除非你有特殊需求)。

填写完成后,点击 【保存】。

更新缓存

字段添加成功后,系统会提示你“成功添加新字段”，并要求你更新缓存。

1. 返回到 【核心】 -> 【频道管理】。
2. 找到你的主栏目（网站首页”），点击其右侧的 【更新系统缓存】。

第二步：在前台内容页调用自定义图片字段

字段已经添加好了,现在我们需要在前台的文章页面（article_article.htm）中，将这张图片显示出来。

找到并打开文章模板文件

1. 进入后台的 【模板】 -> 【默认模板管理】。
2. 在模板列表中,找到 页模板】，点击其右侧的 【选择】 或 【修改】，找到 article_article.htm 文件并打开它。

使用 {dede:field} 标签调用图片

织梦CMS使用特定的标签来调用字段,对于我们刚刚添加的 custom_image 字段，调用方式如下。

在模板中需要显示图片的位置，插入以下代码：

{dede:field.custom_image function='GetImage(@me, 600, 400)'/}

代码解析：

• {dede:field.custom_image}: 这是最基本的调用方式，它会直接输出图片在数据库中保存的路径（/uploads/20251027/123456.jpg）。
• function='...': 这是一个功能强大的修饰符，可以对字段值进行处理。
• GetImage(): 这是织梦内置的一个专门处理图片路径的函数。
• @me: 这个占位符代表 {dede:field.custom_image} 标签本身输出的值（即原始图片路径）。
• 600, 400: 这两个参数分别代表 宽度 和 高度。GetImage 函数会：
  • 自动生成缩略图：/uploads/20251027/ 目录下存在 jpg 的缩略图（如 123456_600x400.jpg），则直接调用这个缩略图。
  • 自动添加尺寸参数：如果缩略图不存在，它会返回原图路径，但路径后会自动加上尺寸参数，/uploads/20251027/123456.jpg?w=600&h=400，这种方式常配合 <img> 标签的 srcset 属性使用，实现响应式图片。

完整的 <img> 标签写法

我们希望将图片显示为一个 <img> 标签，并添加一些必要的属性，alt（对SEO友好）。

推荐写法：

{dede:field.custom_image function='GetImage(@me, 600, 400)'}
<img src="{@me}" alt="{dede:field.title/}" style="max-width: 100%; height: auto;" />
{/dede:field.custom_image}

代码解析：

• {dede:field.custom_image function='GetImage(@me, 600, 400)'}...{/dede:field.custom_image}: 这是一个标签对，function 的处理结果会存入 @me 变量，并在标签对内部可用。
• src="{@me}": 将处理后的图片路径（可能是缩略图路径或带参数的原路径）设置为 img 标签的 src 属性。
• alt="{dede:field.title/}": 将文章的标题作为 alt 属性，这对搜索引擎优化非常重要。
• style="max-width: 100%; height: auto;": 这是一个很好的CSS实践，可以确保图片不会溢出其容器，并且会随着容器宽度自适应。

第三步：测试

1. 更新缓存：在后台模板管理中，点击 【更新HTML】 或 【更新系统缓存】，确保新的模板代码生效。
2. 更新文章：去任意一篇文章，在后台编辑页面，你会看到新添加的“自定义图片”字段，点击上传按钮，选择一张图片并保存。
3. 前台预览：在前台打开这篇文章，你应该就能看到你上传的图片了。

常见问题与注意事项

1. 图片不显示？

   • 检查路径：查看源码，图片路径是否正确？图片是否真的上传到了服务器指定目录？
   • 检查权限：检查上传目录（如 /uploads/）的读写权限是否正确（通常是755或777，但777有安全风险）。
   • 检查标签：确认模板中的标签名称 custom_image 是否和后台添加的字段名称完全一致（注意大小写）。
   • 更新缓存：确保后台的“更新系统缓存”和“更新HTML”都已操作。

2. 如何调用多张图片？

   • 如果需要上传多张图片,在添加字段时，字段类型 应该选择 【图片(多选)】。
   • 调用方式会不同,需要使用 {dede:field name='custom_image' function='Getimgs(@me, 600, 400, 0)'/}，这个函数会返回一个包含所有图片 <img> 标签的HTML字符串，你需要将其放在一个容器（如 <div>）中，并用CSS控制其布局。

3. 字段名称的重要性

   一定要使用有意义的、不易冲突的英文字段名，避免使用中文、特殊字符或数字开头。

通过以上三个步骤,你就可以在织梦CMS中完美地实现内容页自定义图片字段的功能了。