织梦缩略图如何实现随机大小？

这通常通过修改织梦的标签调用，结合PHP的随机函数来实现，核心思路是：在调用缩略图的标签里，动态生成一个随机的宽度和高度值，并替换掉固定的宽高。

下面我将提供几种从简单到复杂的方法,你可以根据自己的需求选择。

使用织梦的万能标签 {dede:arclist} + 自定义函数（推荐）

这是最灵活、最推荐的方法，我们通过自定义一个PHP函数来生成随机尺寸,然后在模板标签中调用它。

步骤 1：创建自定义函数文件

1. 打开织梦的 include 目录。
2. 找到并打开 extend.func.php 文件，如果这个文件不存在,请自己创建一个。
3. 在文件末尾 ?> 的前面,添加以下PHP代码：

/**
 * 生成一个指定范围内的随机整数
 * @param int $min 最小值
 * @param int $max 最大值
 * @return int
 */
function getRandomSize($min = 150, $max = 300) {
    // mt_rand() 比 rand() 更快，生成的随机数质量也更高
    return mt_rand($min, $max);
}

代码解释：

• 这个函数 getRandomSize 接受两个参数 $min 和 $max,即随机尺寸的最小值和最大值。
• 默认值设为 150 到 300 像素,你可以根据自己网站的设计修改。
• mt_rand() 是PHP内置的高性能随机数生成函数。

步骤 2：修改模板文件

打开你需要调用缩略图的模板文件（通常是 list_article.htm、index.htm 或文章详情页 article_article.htm等）。

找到 {dede:arclist} 标签，找到 imglink 或 litpic 字段,织梦默认生成的缩略图标签通常是这样的：

<a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]" width="200" height="150" /></a>

我们要把固定的 width="200" height="150" 替换为随机的。

修改后的代码如下：

<a href="[field:arcurl/]">
    <img src="[field:litpic/]" 
         alt="[field:title/]" 
         width="<?php echo getRandomSize(180, 280); ?>" 
         height="<?php echo getRandomSize(120, 200); ?>" 
    />
</a>

代码解释：

• width="<?php echo getRandomSize(180, 280); ?>"：这里的 width 属性不再是固定值，而是通过PHP代码调用我们刚刚创建的 getRandomSize 函数，生成一个在 180 到 280 之间的随机数。
• height="<?php echo getRandomSize(120, 200); ?>"：同理，高度也是一个在 120 到 200 之间的随机数。
• 注意：我们为宽度和高度设置了不同的随机范围，这样图片的宽高比也是随机的，效果更自然,你也可以使用相同的范围。

步骤 3：更新缓存并测试

1. 登录织梦后台。
2. 点击顶部菜单的“生成” -> “主页HTML” -> “更新主页”，或者直接点击“更新系统缓存”。
3. 刷新你的网站前台页面，查看效果，你会发现,每篇文章的缩略图尺寸都变得不一样了。

使用CSS的 width 和 height 属性（简单但不完美）

这种方法非常简单，但有一个致命的缺点，所以不推荐,但可以作为了解。

1. 修改模板：在模板中，只保留图片的 src 属性，去掉 width 和 height 属性。

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

2. 添加CSS样式：在你的CSS文件中（通常是 /templets/你的模板/style/ 目录下的 .css 文件）,添加如下样式：

   /* 给文章列表中的所有缩略图添加一个类名，避免影响其他图片 */
   .arc-list img {
       width: 180px; /* 设置一个基础宽度 */
       height: auto; /* 高度自动，保持图片比例 */
       /* 或者使用以下方式，让宽高都随机 */
       /* width: calc(180px + (280 - 180) * (Math.random())); */ 
       /* 注意：CSS的calc()和随机数在CSS中兼容性不好，不推荐使用 */
   }

为什么不推荐？

• 无法同时随机宽高：CSS很难同时随机控制宽度和高并保持一定的合理性，如果只随机宽度，高度按比例缩放，那么所有图片的显示宽度会趋于一致（因为CSS设置了基础宽度），只是高度在变,效果不如方法一。
• 页面布局跳动：由于图片没有固定的尺寸，在页面加载完成前，页面布局会不稳定，图片加载完成后会“跳动”,影响用户体验。

使用JavaScript（前端随机）

这种方法是在页面加载完成后，用JavaScript动态修改图片的宽高，优点是不需要修改PHP,缺点是会增加页面加载的负担。

1. 修改模板：与方法二类似,先去掉HTML中的固定宽高。

   <a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]" class="random-img" /></a>

   注意：给图片加一个 class，方便JS选择。

2. 添加JavaScript代码：在模板的底部（</body> 标签之前）加入以下JS代码。

   <script>
   document.addEventListener('DOMContentLoaded', function() {
       // 获取所有带有 random-img 类的图片
       const images = document.querySelectorAll('.random-img');
       images.forEach(img => {
           // 定义随机范围
           const minWidth = 180;
           const maxWidth = 280;
           const minHeight = 120;
           const maxHeight = 200;
           // 生成随机数
           const randomWidth = Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth;
           const randomHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;
           // 设置图片的宽高
           img.style.width = randomWidth + 'px';
           img.style.height = randomHeight + 'px';
       });
   });
   </script>

优缺点分析：

• 优点：不涉及后端修改,对PHP不熟悉的用户友好。
• 缺点：
  • 性能：增加了前端的计算和DOM操作,对页面加载速度有轻微影响。
  • 闪烁：在JS执行之前，图片会以原始尺寸显示，然后突然变成随机尺寸，造成页面闪烁,用户体验较差。
  • SEO：搜索引擎抓取时，看到的是没有尺寸的图片,可能会影响图片在搜索结果中的展示效果。

总结与建议

强烈建议使用方法一（PHP自定义函数），它是最专业、最稳定、效果最好的解决方案，虽然需要一点PHP基础，但步骤清晰，操作简单，一旦设置好,一劳永逸。