bill-lancaster Posted March 10, 2014 Share Posted March 10, 2014 My earlier post resulted in some good advice on showing photos from a folder. This works very well:- <html> <body> <h1 align="center">Family Photos</h1> <?php $dirname = "img/"; $images = glob($dirname."*.png"); foreach($images as $image) { Echo '<img src="'.$image.'"/>'; } ?> But how can I also show the file name under the picture? I have the code to extract the file name from the complete path. Quote Link to comment Share on other sites More sharing options...
jairathnem Posted March 10, 2014 Share Posted March 10, 2014 you could just echo the name foreach($images as $image) { Echo '<img src="'.$image.'"/> <br />'; echo $image; } Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 Thanks, but the text appears alongside the image, not underneath. Here's what I'd like to see! 2390736357.jpg(100 x 67 pixels)image/jpeg 2390735019.jpg(100 x 67 pixels)image/jpeg 2390370487.jpg(79 x 80 pixels)image/jpeg 2390737530.jpg(100 x 67 pixels)image/jpeg 2397734534.jpg(100 x 56 pixels)image/jpeg This is from http://www.the-art-of-web.com/php/dirlist/1/ but I can't follow the html stylesheet stuff. Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 Except that when I pasted the photos, they were in a horizontal line! Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted March 10, 2014 Share Posted March 10, 2014 If you want the images listed vertically instead of horizontally then remove float: left; from the css code they provided Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 Thanks for that. I want them horizontal actually. Still can't get the text underneath the picture though. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 10, 2014 Share Posted March 10, 2014 Wrap each image and text in a div tag. <div> <center> <img><br> This is my caption </div> Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 This didn't work:- <html> <body> <h1 align="center">Family Photos</h1> <?php $dirname = "img/"; $images = glob($dirname."*.png"); foreach($images as $img) { <div> echo '<img src= "'.$img.'" />'; echo "XXX" </div> } ?> Its possible that div is html and not php, found a post that suggests using echo "<div>"; But that doesn't work either Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 10, 2014 Share Posted March 10, 2014 Normally I don't provide such help to someone who doesn't apparently have a clue, but here goes: <?php echo "<html><body>"; echo "<center><h1>Family Photos</h1></center>"; $dirname = "img/"; $images = glob($dirname."*.png"); foreach($images as $img) { $img_cap = "???"; echo "<div><img src='$img'><br>$img_cap</div>"; } ?> Where are you going to get the captions for each image as you cycle thru them? Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 (edited) Glad you're making an exception. The captions could just be the file name (as mentioned, I have the code to extract that) or possibly either from a database or a comment tag in the file. Edited March 10, 2014 by bill-lancaster Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 10, 2014 Share Posted March 10, 2014 A comment tag in the file? The image file? Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 Yup - is that a problem? Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 10, 2014 Share Posted March 10, 2014 So - now you can teach me something. How do you get a comment out of an image file? Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 I'll let you know when (if) I get that far. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 10, 2014 Share Posted March 10, 2014 I was being facetious since I don't think you can. (But I could be wrong.) If I were doing it I would capture the comment from the file upload page and then store the image in my images folder and at the same time save the comment in a table under the image's saved name, obviously checking the table before both actions to ensure that I don't have a dupe image name. I would also store some other pertinent data in the table too, such as date added, contributor(?) name or id, dimensions (w/h), and maybe a keyword or two to provide some rudimentary search capabilities. Then my display page (that we just worked on) would use a query instead of a glob to get the image names (and comments) and then build the page. Quote Link to comment Share on other sites More sharing options...
bill-lancaster Posted March 11, 2014 Author Share Posted March 11, 2014 I was being facetious also. This is where I am. I have several hundred scanned photos stored offline and managed by a mysql database. All the photos have associated thumbnails and descriptive info is held in the database. This is the sort of thing I've been doing for a long time but there came the need to share the info online. Hence my first venture into php, html etc. I already have a login page that manages user id & password through mysql and I can import info from my local db. The next step is to present the thumbnails on the web in a presentable manner PLUS a caption underneath. As you observe, just the photo name (which in my case is unique) will do. After that I was I hoping to use the 'onhover' to display the full information and then click to display a larger image. Quote Link to comment Share on other sites More sharing options...
ginerjm Posted March 11, 2014 Share Posted March 11, 2014 Sounds like you are where you want to be. The hover and accompanying text display as well as the click to a larger image are a POC - with JavaScript. Please tell me that you didn't store any images in your db. Not recommended at all. 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.