automatic folder menu PHP with png, gif

3 hours ago 1
ARTICLE AD BOX

I am building a simple PHP gallery that dynamically scans folders and displays images. Currently, the script works well for standard image formats like JPG, PNG, and GIF. However, I want to extend this functionality to include PDF files.

The Goal: When the script encounters a PDF file in the directory, I don't want it to just show a broken image link or a text URL. Instead, I want it to display a specific "PDF icon" image that acts as a thumbnail, which users can click to open the document.

The Logic:

Update the glob or extension filtering to recognize .pdf files.

In the foreach loop, check the file extension.

If it's an image, render the file itself.

If it's a PDF, render a local pdf-icon.png.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>Document</title> </head> <body> <?php $menu = glob('./Galeria_A/*'); $filter = ['-', '~', '_']; $current_folder = isset($_GET['folder']) ? $_GET['folder'] : ''; echo '<ul class="header-ul">'; foreach ($menu as $item) { $strr = str_replace("./Galeria_A/", "", $item); $print = str_replace($filter, " ", $strr); $active = ($strr === $current_folder) ? 'active' : ''; echo '<li><a class="' . $active . '" href="?folder=' . $strr . '">' . ucfirst($print) . '</a></li>'; } echo '</ul>'; ?> <main> <ul> <?php $current_folder = $_GET['folder']; echo $current_folder; $files = glob('./Galeria_A/' . $current_folder . '/*'); echo "<pre>"; print_r($files); echo "</pre>"; foreach ($files as $file) { echo '<li class="image"><a href="#"><img src="' . $file . '">' . '</a></li>'; } ?> </ul> <?php $gif = []; $jpeg = []; $jpg = []; $png = []; foreach ($files as $file) { if (strpos($file, ".gif")) { array_push($gif, $file); } else if (strpos($file, ".jpeg")) { array_push($jpeg, $file); } else if (strpos($file, ".jpg")) { array_push($jpg, $file); } else if (strpos($file, ".png")) { array_push($png, $file); } } echo "gif files:" . "<br><br>"; foreach ($gif as $file) { echo $file . "<br>"; } echo "jpeg files:" . "<br><br>"; foreach ($jpeg as $file) { echo $file . "<br>"; } echo "jpg files:" . "<br><br>"; foreach ($jpg as $file) { echo $file . "<br>"; } echo "png files:" . "<br><br>"; foreach ($png as $file) { echo $file . "<br>"; } ?> </main> </body> </html>

here is also css if anyone wants to adjust something:

*{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .header-ul{ text-align: center; list-style: none; display: flex; justify-content: center; gap: 20px; padding: 0; margin: 20px 0; } .header-ul li{ margin: 0; } .header-ul li a{ color: #000; text-decoration: none; padding: 6px 10px; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease; } .header-ul li a:hover, .header-ul li a.active{ color: red; } img{ width: 250px; }

its my first time posting so sorry if iam being imprecise

Read Entire Article