Automatic image file type sorter, with automatic menu creation php

22 hours ago 1

ARTICLE AD BOX

I’m currently working on a personal project that I’m really passionate about. My long-term goal is to scale it into something bigger, but right now, I’m in the thick of the early development stages.

Because I’m relatively new to this, I know there are some rough edges and obvious flaws in the current build. I’m looking for honest feedback, suggestions on best practices, or even just a bit of guidance on [mention a specific area, e.g., UI design or backend logic]. I'm eager to learn and improve, so any help would be greatly appreciated!

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Gallery image sorter</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul class="headerMENU"> <?php //make sure to insert your folder name and or specific directory here $Galery_NAME = 'INSERRT_YOUR_FOLDER_NAME_HERE'; $dir = "./".$Galery_NAME.""; $files = scandir($dir); // sorry i couldnt think of a better solution array_shift($files); array_shift($files); $URL = isset($_GET['folder']) ? $_GET['folder'] : ''; foreach ($files as $FILE) { $filter = ["_","-","~"]; $cleaner_FILE = str_replace($filter, " ", $FILE); $UTCFIRST_FILE = ucfirst(strtolower($cleaner_FILE)); //selector function $css_class = ""; if ($FILE == $URL) { $css_class = 'class="selected"'; } echo '<li><a href="index.php?folder='.$FILE.'" '.$css_class.'>'.$UTCFIRST_FILE.'</a></li>'; } ?> </ul> <?php $ROUTE = "./".$Galery_NAME."/" . $URL; $DIR_ROUTE = scandir($ROUTE); $Types = ["jpg", "png", "gif"]; foreach ($Types as $TYPES) { echo "<h2>Obrázky " . strtoupper($TYPES) . "</h2>"; echo "<ul>"; foreach ($DIR_ROUTE as $FOTO) { $Extention = strtolower(pathinfo($FOTO, PATHINFO_EXTENSION)); if ($Extention == $TYPES) { $CLEAN_NAME_foto = str_replace(["_","-","~"], " ", pathinfo($FOTO, PATHINFO_FILENAME)); echo "<li>"."<a href='$ROUTE/$FOTO' target='_blank'>" . $CLEAN_NAME_foto . "<br>"; echo "<img src='$ROUTE/$FOTO' class='thumpnail_img''>"; echo "</a>". "</li>"; } } echo "</ul>"; } ?> </body> </html> * { background-color: #000; color: white; } .headerMENU { list-style: none; display: flex; justify-content: center; gap: 15px; } .headerMENU a { text-decoration: none; color: white; } .selected { background-color: darkred; color: white !important; } ul { list-style: none; } li { display: inline-block; margin: 10px; vertical-align: top; text-align: center; } ul li a{ text-decoration: none; } .thumpnail_img{ width: 100px; }

Read Entire Article