如何为PHP图库脚本中的图片alt字段添加自动递增编号

要实现alt字段自动递增编号，只需在循环中添加计数器变量即可，修改后的代码如下：

<!-- (A) CSS & JS -->
<link href="gallery/gallery.css" rel="stylesheet">
<script src="gallery/gallery.js"></script>
 
<div class="gallery"><?php
// (B) 获取图库文件夹中的图片文件列表
$dir = __DIR__ . DIRECTORY_SEPARATOR . "./products/adidas/" . DIRECTORY_SEPARATOR;
$images = glob("$dir*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
natsort ($images); // 自然排序

// (C) 初始化计数器
$counter = 1;

// (D) 输出图片
foreach ($images as $i) {
  // 在alt中加入递增编号
  printf('<img src="./products/adidas/%s" alt="adidas %d">', basename($i), $counter);
  // 计数器自增
  $counter++;
}
?></div>

修改说明： #

• 新增$counter = 1;初始化计数器，从1开始计数
• 修改printf中的alt部分，用%d作为数字占位符，传入$counter变量
• 每次循环结束后执行$counter++，实现编号递增

输出的HTML将和你预期的一致：

<div class="gallery">
<img src="./products/adidas-cushon.webp" alt="adidas 1">
<img src="./products/adidas-majestic.webp" alt="adidas 2">
<img src="./products/adidas-wear.webp" alt="adidas 3">
</div>

如果需要给最后一张图片设置特殊alt文本（比如adidas and more），可以增加总数判断：

<!-- (A) CSS & JS -->
<link href="gallery/gallery.css" rel="stylesheet">
<script src="gallery/gallery.js"></script>
 
<div class="gallery"><?php
// (B) 获取图库文件夹中的图片文件列表
$dir = __DIR__ . DIRECTORY_SEPARATOR . "./products/adidas/" . DIRECTORY_SEPARATOR;
$images = glob("$dir*.{jpg,jpeg,gif,png,bmp,webp}", GLOB_BRACE);
natsort ($images); // 自然排序
$totalImages = count($images); // 获取图片总数

// (C) 初始化计数器
$counter = 1;

// (D) 输出图片
foreach ($images as $i) {
  $altText = $counter == $totalImages ? "adidas and more" : "adidas $counter";
  printf('<img src="./products/adidas/%s" alt="%s">', basename($i), $altText);
  $counter++;
}
?></div>

内容的提问来源于stack exchange，提问作者carinho