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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/ 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; } Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1471990 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1471992 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! Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472002 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 Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472010 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472018 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> Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472026 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 Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472040 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? Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472041 Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472042 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? Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472043 Share on other sites More sharing options...
bill-lancaster Posted March 10, 2014 Author Share Posted March 10, 2014 Yup - is that a problem? Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472044 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? Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472045 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472046 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472049 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472119 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. Link to comment https://forums.phpfreaks.com/topic/286845-show-text-below-a-picture/#findComment-1472159 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.