使用 PHP Glob 显示图像时添加 alt 和标题以及格式

Question

所以我使用 PHP 的这一点来显示特定目录中的所有图像：

<?php
  $dirname = "cards/";
  $images = glob($dirname."*.png");
  foreach($images as $image) {
  echo '<img src="'.$image.'" />';
  }
?>

加载我的图片效果很好。但我想知道如何让它回显 html 不仅加载图像，而且将文件名显示为 alt 和 title 属性。我尝试使用以下但它加载了目录名和文件名。试图只获取文件名。

echo '<img src="'.$image.'" alt="'.$image.'" title="'.$image.'" />';

另外，我想每行只显示五张图片，有没有办法用自动生成的图片格式化？

更新：关于一次显示五张图片，我不需要滑块或分页。我想要加载目录中的所有图像，但每 5 张图像后有一个换行符。

提前致谢！

Answer 1

将此添加到您的循环中以获取不带文件扩展名的图像名称

<div class="row">
<?php $dirname = "cards/"; $images = glob($dirname . "*.png");  ?>
<?php foreach ($images as $image)  :?>
    <?php $title = pathinfo($image); ?>
    <div class="col-md-3">
      <img src="<?= $image ?>" alt="<?=title['filename']?>" class="img-thumbnail" >
    </div>
<?php endforeach ?>
</div>

就每行显示 5 张图像而言，您要创建分页，每次单击 link 时 return 显示 5 张图像。寻找 jQuery 滑块插件。

测试生成下面的 html 标记，但每行只有 4 个图像。

<div class="container">
    <div class="row">                           
        <div class="col-md-3">
            <img src="downloads/hex_bg_black.jpg" alt="hex_bg_black" class="img-thumbnail">
        </div>          
        <div class="col-md-3">
            <img src="downloads/zh_bg_1.jpg" alt="zh_bg_1" class="img-thumbnail">
        </div>
    </div>
</div>

希望对您有所帮助。

使用 PHP Glob 显示图像时添加 alt 和标题以及格式

Add alt and title and formatting when using PHP Glob to Display Images

php

image

title

alt