SaranacLake Posted November 29, 2019 Share Posted November 29, 2019 I have a directory full of pictures that I would like to display in a gallery. Originally I was going to write HTML like this... <li> <img src=/photos/img_001.jpg"> </li> And then simply copy and paste that for the number of photos I have, and then tweak the code to: img_002.jpg, img_003.jpg, and so on. I guess that is silly considering that I have over 500 photos to display! How could I use PHP to go to my /photos/ directory, scan all of the files in that directory, and then grab the file name so I could automate this process? Sorry, but I haven't written PHP in several years so all of this escapes me! ☹️ Quote Link to comment Share on other sites More sharing options...
chhorn Posted November 29, 2019 Share Posted November 29, 2019 Easiest way would be glob https://www.php.net/manual/en/function.glob.php Quote Link to comment Share on other sites More sharing options...
SaranacLake Posted November 29, 2019 Author Share Posted November 29, 2019 8 hours ago, chhorn said: Easiest way would be glob https://www.php.net/manual/en/function.glob.php Not sure how that function would help. I need help figuring out how to tell PHP to iterate through a given folder and read the file names. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted November 29, 2019 Share Posted November 29, 2019 The glob function is correct. Try the manual. It will tell you more. Quote Link to comment Share on other sites More sharing options...
Barand Posted November 29, 2019 Share Posted November 29, 2019 1 hour ago, SaranacLake said: Not sure how that function would help. The link that @chhorn gave you has an example that shows exactly how it would help. All you had to do was click it and read. Quote Link to comment Share on other sites More sharing options...
SaranacLake Posted November 29, 2019 Author Share Posted November 29, 2019 40 minutes ago, Barand said: The link that @chhorn gave you has an example that shows exactly how it would help. All you had to do was click it and read. I did read it and at first read it just seemed like a regex. I looked at the link again and it sorta makes sense, and am trying it now. I recall seeing this done in the past and you had to use all of these file commands which is why I was confused by his answer. Is glob supported by all versions of PHP? Are there other ways to do this? (It sounds like it lacks leveraging regex, which probably doesn't matter in my immediate need, but still. Quote Link to comment Share on other sites More sharing options...
SaranacLake Posted November 29, 2019 Author Share Posted November 29, 2019 I am still not understanding how to tell glob() where to look for files? Is there a more robust/better way to do this than using glob()? Quote Link to comment Share on other sites More sharing options...
Barand Posted November 29, 2019 Share Posted November 29, 2019 This example uses glob() to get all .png and .jpg in a folder. By default, the folder is assumed to be named "images" and is a subdirectory of the folder containing the script. Images are displayed as thumbnails, 5 in each row with 25 per page. <?php session_start(); const IMGDIR = 'images/'; const PERPAGE = 25; $page = $_GET['page'] ?? 1; $imgdir = $_GET['dir'] ?? IMGDIR; if (!isset($_SESSION['imgdir']) || $_SESSION['imgdir'] != $imgdir) { unset($_SESSION['images']); $_SESSION['imgdir'] = $imgdir; $page = 1; } if (!isset($_SESSION['images'])) { $_SESSION['images'] = glob($imgdir.'{*.png,*.jpg}', GLOB_BRACE); // get .jpg and .png images } $total = count($_SESSION['images']); /** ************************************************************************************** * display paginated images from SESSION['images] * * @param int $page * @param int $perpage */ function displayImages($page, $perpage) { $start = ($page - 1) * $perpage; $ilist = array_slice($_SESSION['images'], $start, $perpage); foreach ($ilist as $i) { $n = trim(basename($i)); list($iw, $ih,, $sz) = getimagesize($i); if ($iw >= $ih) { // landscape $w = 150; $h = 150 * $ih/$iw; } else { // portrait $h = 150; $w = 150 * $iw/$ih; } $alt = substr($n, 0, 15); echo " <div class='image'> <img src='$i' height='$h' width = '$w' alt='$alt'> </div> "; } echo "<div style='clear:both'></div>"; } /** ************************************************************************************ * function to output page selection buttons * * @param int $total total records * @param int $page current page number * @return string selection buttons html */ function page_selector($total, $page) { if ($total==0) { return ''; } $kPages = ceil($total/PERPAGE); $filler = ' · · · '; $lim1 = max(1, $page-2); $lim2 = min($kPages, $page+3); $p = $page==1 ? 1 : $page - 1; $n = $page== $kPages ? $kPages : $page + 1;; $out = "$kPages page" . ($kPages==1 ? '' : 's') . "  "; if ($kPages==1) { return $out; } $out .= ($page > 1) ? "<div class='pagipage' data-pn='$p'>Prev</div> " : "<div class='pagipage x' data-pn='$p' disabled>Prev</div> "; if ($page > 4) { $out .= "<div class='pagipage' data-pn='1'>1</div> $filler"; } elseif ($page==4) { $out .= "<div class='pagipage' data-pn='1'>1</div>"; } for ($i=$lim1; $i<=$lim2; $i++) { if ($page==$i) $out .= "<div class='pagicurrent'>$i</div>"; else $out .= "<div class='pagipage' data-pn='$i'>$i</div>"; } if ($page < $kPages-3) { $out .= "$filler <div class='pagipage' data-pn='$kPages'>$kPages</div>"; } $out .= $page < $kPages ? " <div class='pagipage' data-pn='$n'>Next</div>" : " <div class='pagipage x' data-pn='$n' disabled>Next</div>"; return $out; } ?> <!DOCTYPE html> <html> <head> <meta http-equiv="content-language" content="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="author" content="B A Andrew"> <meta name="creation-date" content="11/29/2019"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <title>Example</title> <script type="text/javascript"> $().ready( function() { $(".pagipage").click( function() { $("#page").val( $(this).data("pn") ) $("#form1").submit() }) }) </script> <style type="text/css"> body { font-family: verdana, sans-serif; font-size: 11pt; } label { display: inline-block; width: 150px; font-weight: 600; } #image_wrapper { margin: 30px; } .image { width: 18%; min-height: 200px; margin: 10px; float: left; text-align: center; padding: auto;} /* pagination styles */ .pagipage { display: inline; width: 25px; height: 15px; padding: 3px 5px; text-align: center; font-size: 9pt; border: 1px solid #BB9A21 ; color: #BB9A21; background-color: #FFF; cursor: pointer; margin-left: -1px; } .pagipage.x { background-color: #CCC;} .pagipage:hover { background-color: #BB9A21; border-color: #F0F; color: white; } .pagicurrent { display: inline; width: 25px; height: 15px; text-align: center; font-size: 9pt; font-weight: 600; border: 1px solid #BB9A21; background-color: #BB9A21; color: white; padding: 3px 5px; } .paginate_panel { text-align: center; margin: 20px 0; width: 100%; color: #BB9A21; } </style> </head> <body> <header> <h1>Example Image List</h1> </header> <form id="form1"> <fieldset> <label>Image Folder</label> <input type="text" name="dir" value="<?=$imgdir?>" size="80"> <input type="hidden" name="page" id="page" value="<?=$page?>"> <br> <label> </label> <input type="submit" name="btnSubmit" value="Submit"> </fieldset> </form> <div class='paginate_panel'> <?=page_selector($total, $page, PERPAGE)?> </div> <div id="image_wrapper"> <?=displayImages($page, PERPAGE)?> </div> <div class='paginate_panel'> <?=page_selector($total, $page, PERPAGE)?> </div> </body> </html> 1 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.