phpcms单网页如何添加图片字段？

1. 在后台添加字段：在模型管理中为你的单网页模型增加一个“图片”类型的字段。
2. 在前台调用并显示：在你的模板文件中，使用 PHPCMS 的标签语法来调用并输出这个新添加的图片。

下面是详细的图文步骤说明。

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

假设你已经创建好了一个“单网页”模型（用于“关于我们”页面）。

1. 登录后台：使用管理员账号登录你的 PHPCMS 后台。

2. 进入模型管理：

   • 在左侧菜单栏找到 内容 -> 模型管理。
   • 在模型列表中，找到你正在使用的“单网页”模型（模型名称可能是 page），然后点击右侧的 管理字段。

3. 添加新字段：

   
   （图片来源网络，侵删）

   • 进入字段管理页面后，点击右上角的 添加字段 按钮。

   • 在弹出的表单中,填写以下信息：

   • 字段名：img (这是数据库中存储的字段名，只能使用英文、数字和下划线,建议小写)

   • 字段标识：图片 (这是在后台表单中显示给编辑者看的名称,可以使用中文)

     
     （图片来源网络，侵删）

   • 字段类型：选择 图片,这是最关键的一步。

   • 字段说明：上传页面头图 (可选,用于提示编辑者这个字段是做什么的)

   • 默认值：留空

   • 是否显示：勾选 是 (这样在后台编辑页面就能看到这个输入框)

   • 是否必填：根据需要选择

   • 数据：这个选项对于图片类型很重要，用于设置上传图片的尺寸限制等,可以暂时留空使用默认值。

4. 保存字段：

   • 点击 提交 或 保存 按钮。

5. 更新缓存：

   • 字段添加成功后,系统通常会提示你更新模型缓存。
   • 在后台菜单中找到 系统 -> 数据库 -> 更新缓存，点击执行，这一步非常重要，不更新缓存,前台可能无法正确调用新字段。

6. 检查后台编辑页面：

   • 你可以去编辑你的单网页内容（在“内容 -> 页面管理”中编辑“关于我们”页面）。
   • 你应该能看到刚刚添加的“图片”字段,并且可以点击上传图片了。

第二步：在前台模板中调用并显示图片

假设你的单网页模板文件是 phpcms/templates/default/page/show.html。

1. 打开模板文件：使用 FTP 或后台的模板管理功能,打开你的单页模板文件。

2. 使用 PHPCMS 标签调用图片： PHPCMS 使用 {pc} 标签来获取内容数据，图片字段存储的是图片的路径，通常是一个数组，包含 url、width、height 等信息。

   最常见的调用方式如下：

   <!-- {pc action="content" catid="$catid" id="$id"} -->
       <h1>{$title}</h1>
       <!-- 调用并显示图片 -->
       {if $img}
           <img src="{$img.url}" alt="{$title}" style="max-width: 100%; height: auto;">
       {/if}
       <div class="content">
           {$content}
       </div>
   <!-- {/pc} -->

   代码解释：

   • {pc action="content" catid="$catid" id="$id"}: 这是 PHPCMS 获取内容的核心标签。catid 是栏目ID，id 是内容ID，在单页中,这两个变量通常由系统自动传递。
   • {$title}: 调用文章标题。
   • {$img}: 调用我们刚刚添加的名为 img 的字段，由于我们设置的字段类型是“图片”,系统会自动将上传的图片信息解析成一个数组。
   • {$img.url}: 从图片数组中获取图片的完整路径，这是你 <img> 标签 src 属性所需要的值。
   • {if $img} ... {/if}: 这是一个判断语句。img 字段没有上传图片，就不显示 <img> 标签,避免出现破损的图片图标。
   • {$content}: 调用文章正文内容。

3. 保存模板并刷新前台：

   • 保存你的模板文件。
   • 清理浏览器缓存，或者刷新 PHPCMS 的模板缓存（后台 -> 系统 -> 数据库 -> 更新缓存）。
   • 访问你的单网页,现在应该就能看到你上传的图片了。

高级用法：获取多张图片

如果你需要上传多张图片（一个图集），可以在添加字段时，将 字段类型 设置为 多图片。

调用方式略有不同：

<!-- {pc action="content" catid="$catid" id="$id"} -->
    <h1>{$title}</h1>
    <!-- 调用并显示多张图片 -->
    {if $imgs}
        <div class="image-gallery">
            {loop $imgs $item}
                <img src="{$item.url}" alt="{$title}" style="width: 200px; height: 150px; object-fit: cover; margin-right: 10px;">
            {/loop}
        </div>
    {/if}
    <div class="content">
        {$content}
    </div>
<!-- {/pc} -->

代码解释：

• {$imgs}: 调用多图片字段，它会返回一个图片数组，每个元素又是一个包含 url 等信息的小数组。
• {loop $imgs $item}: 这是一个循环遍历标签，它会遍历 $imgs 数组，每次循环将当前图片数组赋值给变量 $item。
• {$item.url}: 在循环内部，通过 $item.url 来获取每一张图片的路径。

按照以上步骤，你就可以成功地为 PHPCMS 的单网页添加并显示图片字段了。