ECShop商品缩略图如何修改模板展示？

第一步：理解核心文件

无论你想修改哪种缩略图,都需要先找到并理解下面两个文件：

1. PHP 逻辑文件：

   • 路径: /themes/你的模板名/goods.dwt
   • 作用: 这个文件是商品详情页的模板，它定义了页面的HTML结构，但它本身不直接输出图片,而是通过调用PHP函数来获取并显示数据。
   • 关键代码: 在这个文件中，你通常会找到类似这样的代码：

     <a href="javascript:;" onclick="ZoomPic(this, {smallimage: '{$goods.goods_img|escape:html}'})">
         <img src="{$goods.goods_img|escape:html}" alt="{$goods.goods_name|escape:html}" class="goodsimgB">
     </a>

     这里的 {$goods.goods_img} 就是一个模板变量,它的值由PHP文件赋给它。

2. PHP 数据处理文件：

   • 路径: /includes/lib_goods.php
   • 作用: 这个文件是商品相关的核心逻辑库，它负责从数据库中读取商品信息，并进行处理，比如获取商品图片、价格、描述等，然后将处理好的数据（赋值给模板变量）传递给模板文件。
   • 关键函数: 在这个文件中，查找 get_goods_info() 函数（或类似的函数，根据ECSHOP版本可能略有不同），这个函数在加载商品详情页时被调用，它会准备 $goods 这个数组，其中就包含了 $goods['goods_img']。

总结一下流程： 浏览器访问商品页 -> PHP执行 goods.php -> goods.php 调用 lib_goods.php 中的 get_goods_info() -> get_goods_info() 从数据库取数据，处理并赋值给 $goods['goods_img'] -> PHP加载 goods.dwt 模板文件 -> 模板文件中的 {$goods.goods_img} 被 PHP 替换为实际的图片地址 -> 最终生成HTML页面返回给浏览器。

第二步：常见修改场景与操作

修改商品主图（默认大图）

默认情况下，{$goods.goods_img} 显示的是商品上传时的第一张图,也就是默认的大图。

目标：想把主图换成别的尺寸,或者想让它清晰一点。

方法：在 lib_goods.php 中修改图片处理逻辑。

1. 打开文件 /includes/lib_goods.php。

   
   （图片来源网络，侵删）

2. 找到 get_goods_info() 函数。

3. 找到 $goods['goods_img'] 的赋值语句，它通常被包装在一个 if 条件里，并且可能包含图片处理逻辑，比如调用 get_image_path() 函数。

4. 关键修改点：ECSHOP 2.7.3 及以上版本支持在图片地址后加上 和尺寸来自动生成缩略图（images/goods-01.jpg!300300）,但更可控的方式是直接修改赋值逻辑。

   找到类似这样的代码：

   // 假设在 get_goods_info 函数中
   if ($goods['goods_img'] != '')
   {
       $goods['goods_img'] = get_image_path($goods['goods_img'], true);
   }

   修改为（以生成 500x500 的缩略图为例）：

   // 假设在 get_goods_info 函数中
   if ($goods['goods_img'] != '')
   {
       // 原来的代码
       // $goods['goods_img'] = get_image_path($goods['goods_img'], true);
       // 修改后的代码，直接指定一个较大的尺寸
       // 这里的 '500500' 是你想要的宽度和高度，ECSHOP会自动处理裁剪或缩放
       $goods['goods_img'] = get_image_path($goods['goods_img'], true, '500500');
   }

   说明：

   • get_image_path($src, $thumb, $path = '') 函数的第三个参数 $path 可以用来指定生成缩略图的尺寸。
   • 注意：这个方法依赖于ECSHOP的图片处理类 (includes/cls_image.php)，确保你的服务器已经安装了 GD库 或 ImageMagick，/images/ 目录有写入权限,否则无法生成新的缩略图。

修改商品相册图（Gallery Images）

商品详情页下方通常有一组小图（相册）,点击可以切换主图。

目标：修改这些小图的尺寸。

方法：同样在 lib_goods.php 中，但需要找到获取相册图片的函数，通常是 get_goods_gallery()。

1. 打开文件 /includes/lib_goods.php。

2. 找到 get_goods_gallery($goods_id) 函数。

3. 在这个函数内部，你会看到一个循环，它从数据库中读取相册图片,并对每张图片进行处理。

   找到类似这样的代码：

   // 在 get_gallery 函数中
   $sql = "SELECT img_id, img_url, img_desc FROM " . $GLOBALS['ecs']->table('goods_gallery') . " WHERE goods_id = '$goods_id' ORDER BY img_id DESC";
   $res = $GLOBALS['db']->getAll($sql);
   $gallery = array();
   foreach ($res AS $row)
   {
       $gallery[] = array(
           'img_id'     => $row['img_id'],
           'img_url'    => get_image_path($row['img_url'], true), // 修改这里
           'thumb_url'  => get_image_path($row['img_url'], true, $GLOBALS['_CFG']['thumb_width'], $GLOBALS['_CFG']['thumb_height']), // 修改这里
           'img_desc'   => $row['img_desc']
       );
   }
   return $gallery;

4. 修改 thumb_url 的生成逻辑，这个变量对应的是相册小图，你可以像修改主图一样,给它指定一个固定的尺寸。

   修改为（以生成 100x100 的缩略图为例）：

   // 在 get_gallery 函数中
   $sql = "SELECT img_id, img_url, img_desc FROM " . $GLOBALS['ecs']->table('goods_gallery') . " WHERE goods_id = '$goods_id' ORDER BY img_id DESC";
   $res = $GLOBALS['db']->getAll($sql);
   $gallery = array();
   foreach ($res AS $row)
   {
       $gallery[] = array(
           'img_id'     => $row['img_id'],
           'img_url'    => get_image_path($row['img_url'], true, '500500'), // 同时把大图也改一下
           'thumb_url'  => get_image_path($row['img_url'], true, '100100'), // 修改这里，指定100x100
           'img_desc'   => $row['img_desc']
       );
   }
   return $gallery;

修改首页/分类页的商品缩略图

这个需求更常见,因为默认的缩略图太小了。

目标：让首页、分类页、新品推荐等地方的商品图变大、更清晰。

方法：这里主要修改模板文件中的调用方式,并配合后台设置。

1. 后台设置（先尝试最简单的方法）：

   • 登录ECSHOP后台 -> 商店设置 -> 商品图片。
   • 在这里可以设置“商品图片宽/高”和“商品缩略图宽/高”。
   • 修改这些数值，然后去后台的 缓存管理 -> 清除模板缓存,刷新页面看看效果。
   • 注意：这个方法只对模板中直接调用后台配置的缩略图有效，如果模板里是硬编码的,可能无效。

2. 修改模板文件（更可靠的方法）：

   • 你需要修改所有展示商品列表的模板文件，
     • /themes/你的模板名/index.dwt (首页)
     • /themes/你的模板名/category.dwt (分类页)
     • /themes/你的模板名/goods_list.lbi (商品列表部件,常被多个页面调用)
   • 在这些文件中，找到显示商品缩略图的代码，通常是这样的：

     <a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name}" /></a>

   • 这里的 {$goods.thumb} 是变量，它是在PHP文件（如 index.php, category.php）中通过 assign_template() 和 assign_dynamic() 等函数从 lib_goods.php 中的 get_warecs() 或类似函数获取的。
   • 直接修改模板变量：最直接粗暴的办法是修改模板文件，把 {$goods.thumb} 换成 {$goods.goods_img}（主图），但这会影响性能,因为所有列表页都会加载大图。
   • 推荐方法：修改数据来源：
     1. 打开 /includes/lib_goods.php。
     2. 找到 get_warecs() 函数（获取推荐商品）或 get_category_recommend_goods() 函数（获取分类推荐商品）等。
     3. 在这些函数中，找到 $row['thumb'] 的赋值语句，它通常是这样：

        $row['thumb'] = get_image_path($row['goods_img'], true, $GLOBALS['_CFG']['thumb_width'], $GLOBALS['_CFG']['thumb_height']);

     4. 修改它，为你想要的尺寸：

        // 假设你想用 220x220 的缩略图
        $row['thumb'] = get_image_path($row['goods_img'], true, '220250');

     5. 保存文件，然后去后台 清除模板缓存,刷新前台页面。

第三步：清理缓存和刷新

无论你修改了哪个文件，最后一步都至关重要：

1. 清除模板缓存：
   • ECSHOP后台 -> 系统设置 -> 缓存管理 -> 清除模板缓存。
   • 或者直接删除 /temp/ 目录下的所有 .php 和 .htm 文件。
2. 清除浏览器缓存：
   • 按 Ctrl + F5 (Windows) 或 Cmd + Shift + R (Mac) 强制刷新页面,确保看到的是最新的效果。

总结与建议

重要提示：

• 备份：在修改任何文件之前,请务必备份原文件！
• 权限：确保网站目录（特别是 /images/ 和 /temp/）有正确的读写权限。
• 图片处理库：确认你的PHP环境已安装并启用了GD库,否则缩略图生成会失败。

希望这份详细的指南能帮助你成功修改ECSHOP的缩略图！