Добавьте alt, title и formatting при использовании PHP Glob для отображения изображений
Поэтому я использую этот бит 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 изображений.
Заранее спасибо!
Решение
Добавьте это в свой цикл, чтобы получить имя изображения без расширения файла
<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 изображений в строке, нужно создать нумерацию страниц и возвращать 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>
Надеюсь, это поможет.
Другие решения
Других решений пока нет …