dedecms v5.7/v5.6栏目增加缩略图功能教程

为dedecms v5.7/v5.6栏目增加缩略图功能教程

本教程将详细介绍如何在DedeCMS V5.7和V5.6版本中为栏目添加缩略图功能，此过程涉及到数据库修改、文件编辑以及模板调整，确保在实际操作前备份网站数据。

一、向dede_arctype栏目数据表添加图片字段typeimg

1、使用SQL命令行工具：通过系统 SQL命令行工具，输入以下代码并执行：

ALTER TABLEdede_arctype ADDtypeimg VARCHAR(200) NOT NULL DEFAULT '';

这段代码将在数据库表dede_arctype中添加一个名为typeimg的字段，用于存储图片路径。

修改相关文件

1. 修改dede/catalog_add.php文件

打开dede/catalog_add.php文件，找到以下代码段并进行替换：

$queryTemplate = "INSERT INTO#@__arctype(reid,topid,sortrank,typename,

替换为：

$queryTemplate = "INSERT INTO#@__arctype(reid,topid,sortrank,typename,typeimg,

同样地，将：

VALUES('~reid~','~topid~','~rank~','~typename~',

替换为：

VALUES('~reid~','~topid~','~rank~','~typename~','~typeimg~',

在文件的后面部分，进行类似的替换：

$in_query = "INSERT INTO#@__arctype(reid,topid,sortrank,typename,

替换为：

$in_query = "INSERT INTO#@__arctype(reid,topid,sortrank,typename,typeimg,

以及：

VALUES('$reid','$topid','$sortrank','$typename',

替换为：

VALUES('$reid','$topid','$sortrank','$typename','$typeimg',

保存文件。

2. 修改dede/catalog_edit.php文件

打开dede/catalog_edit.php文件，找到以下代码段：

$upquery = "UPDATE#@__arctype SET typedir='$typedir',";

在其下面新增一行：

$typeimg='$typeimg',

保存文件。

3. 修改dede/templets/catalog_add.htm模板文件

打开dede/templets/catalog_add.htm文件，在最上面添加以下代码：

<script language="javascript" src="js/main.js"></script>

随便找个位置（例如在栏目名称下方），添加如下代码：

<tr>
    <td class='bline' height="26" style="paddingleft:10px;">栏目缩略图：</td>
    <td class='bline'>
        <input name="typeimg" type="text" style="width:300px" id="typeimg" class="alltxt" value="" />
        <input type="button" name="set9" value="浏览..." class="coolbg np" style="width:60px" onClick="SelectImage('form1.typeimg','');" />
    </td>
</tr>

保存文件。

4. 修改dede/templets/catalog_edit.htm模板文件

同样地，打开dede/templets/catalog_edit.htm文件，在最上面添加以下代码：

<script language="javascript" src="js/main.js"></script>

找到栏目名称的位置，添加如下代码：

<tr>
    <td class='bline' height="65" style="paddingleft:10px;">栏目缩略图：</td>
    <td class='bline' >
        <input name="typeimg" type="text" style="width:300px" id="typeimg" class="alltxt" value="<?php echo $myrow['typeimg']?>" />
        <input type="button" name="set9" value="浏览..." class="coolbg np" style="width:60px" onClick="SelectImage('form1.typeimg','');" />
    </td>
</tr>

保存文件。

调用缩略图

一般情况下，我们调用栏目的时候有两种方式：{dede:channel}和{dede:type}，因此需要修改include/taglib/channel.lib.php和include/taglib/type.lib.php文件。

1. 修改include/taglib/channel.lib.php文件

打开include/taglib/channel.lib.php文件，在78 94行之间，找到如下代码：

if($type=='top') {
    $sql = "SELECT id,typename,typedir,isdefault,ispart,defaultname,namerule2,moresite,siteurl,sitepath FROM#@__arctype WHERE reid=0 And ishidden<>1 order by sortrank asc limit 0, $line ";
} else if($type=='son') {
    if($typeid==0) return '';
    $sql = "SELECT id,typename,typedir,isdefault,i";
}

在这段代码的最后面加上：

    $typeimg,

保存文件。

常见问题解答FAQs

问题1：为什么在后台添加或编辑栏目时没有看到缩略图上传选项？

答：如果在后台添加或编辑栏目时没有看到缩略图上传选项，请确保已经正确修改了dede/catalog_add.php、dede/catalog_edit.php、dede/templets/catalog_add.htm和dede/templets/catalog_edit.htm这四个文件，如果仍然无法解决，请检查是否有缓存文件未清除，尝试清除浏览器缓存或更换浏览器再试。

问题2：如何调用栏目的缩略图？

答：要调用栏目的缩略图，可以在模板文件中使用以下代码：

<img src="[field:typeimg/]" alt="栏目缩略图" />

这样，当页面加载时，会显示对应栏目的缩略图。

Dedecms v5.7/v5.6 栏目增加缩略图功能教程

前言

Dedecms是一款功能强大的内容管理系统，支持多种扩展功能，本教程将指导您如何在Dedecms v5.7/v5.6中为栏目增加缩略图功能。

准备工作

Dedecms v5.7/v5.6安装好的网站

对PHP和MySQL有一定的了解

图片处理软件（如Photoshop、GIMP等）

步骤一：修改栏目模板

1、定位模板文件：进入Dedecms后台，找到需要添加缩略图的栏目模板文件，通常位于templets目录下对应栏目的文件夹中。

2、打开模板文件：使用文本编辑器打开模板文件。

3、查找相关代码：在模板文件中查找用于显示列表内容的代码块，通常这些代码块会包含<li>或<div>

4、添加缩略图代码：

在找到的代码块中，添加以下代码来显示缩略图：

```html

<img src="[field:litpic/]" alt="[field:title/]" />

```

其中[field:litpic/]是获取文章缩略图的标记，[field:title/]是获取文章标题的标记。

5、保存并预览：保存模板文件，并在前台预览效果，确认缩略图是否显示正确。

步骤二：修改数据库字段

1、进入后台：登录Dedecms后台，进入“系统参数”设置。

2、找到“文章属性”：在系统参数中找到“文章属性”设置。

3、添加新字段：

点击“添加新字段”按钮。

输入字段名称，缩略图”。

选择字段类型，选择“图片”类型。

设置字段属性，例如图片上传大小、宽高限制等。

4、保存设置：保存所有设置。

5、更新数据：回到文章管理页面，选择需要添加缩略图的文章，上传图片，并保存。

步骤三：修改文章发布模板

1、定位模板文件：进入Dedecms后台，找到文章发布的模板文件。

2、打开模板文件：使用文本编辑器打开模板文件。

3、查找相关代码：在模板文件中查找用于显示文章内容的代码块。

4、添加缩略图显示代码：

在找到的代码块中，添加以下代码来显示文章的缩略图：

```html

<div class="articlethumb">

<img src="[field:litpic/]" alt="[field:title/]" />

</div>

```

其中[field:litpic/]是获取文章缩略图的标记。

5、保存并预览：保存模板文件，并在后台预览效果，确认缩略图是否显示正确。

通过以上步骤，您已经成功在Dedecms v5.7/v5.6中为栏目增加了缩略图功能，如果遇到问题，请检查模板代码和数据库字段设置是否正确，或者查阅Dedecms官方文档获取帮助。