only1perky Posted December 16, 2010 Share Posted December 16, 2010 I wonder if someone can advise me on how to best tackle this issue. At the moment I am displaying a gallery of images pulled from the database. These are displayed as a thumbnail across my page, currently 4 in each row (then a new row is started dispalying the next 4 thumbnails). This works fine and does exactly what it should do. Now however I would like to display the username of who uploaded the image underneath each thumbnail. So it would go something like this: Display first 4 thumbnails pulled from database - breakline - Display username under each thumbnail - repeat for remainder of images, e.g: image image image image user user user user image image image image user user user user How would I go about this so it doesn't just display all the images in one vertical column, e.g: Image User Image User Image User I hope this makes sense. Any help would be greatly appreciated. Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/ Share on other sites More sharing options...
litebearer Posted December 16, 2010 Share Posted December 16, 2010 please show your existing code Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/#findComment-1148082 Share on other sites More sharing options...
solon Posted December 16, 2010 Share Posted December 16, 2010 you can either use div tags and use css to arrange the accordingly or tables to do the same. Its easier with tables but its much better and easier to change later using div's and css Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/#findComment-1148083 Share on other sites More sharing options...
johnny86 Posted December 16, 2010 Share Posted December 16, 2010 Try this one out: #row_container { clear: both; } #four_row { list-style-type: none; } #image { display: block; } #li_row { position: relative; float: left; } <div id="row_container"> <ul id="four_row"> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> </ul> </div> <div id="row_container"> <ul id="four_row"> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> <li id="li_row"><span id="image">IMAGE</span>User</li> </ul> </div> Replace those <span> tags with your <img src="something" alt="something" id="image" /> Should work.. =) Then create a php loop that creates one div for every four pictures in one round. Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/#findComment-1148090 Share on other sites More sharing options...
only1perky Posted December 16, 2010 Author Share Posted December 16, 2010 Hi Guys, Thanks for the quick response. I would prefer to user divs if possible. At the moment my code to print the images is simply: mysql_select_db($database_connuser, $connuser); $query_rsuniqueid = "SELECT * FROM gallery GROUP BY userid"; $rsuniqueid = mysql_query($query_rsuniqueid, $connuser) or die(mysql_error()); $row_rsuniqueid = mysql_fetch_assoc($rsuniqueid); $totalRows_rsuniqueid = mysql_num_rows($rsuniqueid); do { $caption = $row_rsuniqueid['caption']; $file_path = $row_rsuniqueid['file_path']; $userid = $row_rsuniqueid['userid']; echo'<a href="usersgallery.php?id='.$userid.'"><img border="0" src="../phpgallery/js/resize.php?src=gallery/'.$userid.'/'.$file_path.'&h=80&w=80&zc=1" alt="'.$caption.'" class="bordered" /></a> '; } while ($row_rsuniqueid = mysql_fetch_assoc($rsuniqueid)); $rows = mysql_num_rows($rsuniqueid); if($rows > 0) { mysql_data_seek($rsuniqueid, 0); $row_rsuniqueid = mysql_fetch_assoc($rsuniqueid); } What I didn't memtion earlier is that it doesn't need to display 4 images (that was just an example) it will display images across the row depending on the individual page width. Oh and also take the userid as the username for now. I would really like to find out the most practical/efficient way of doing this (for future reference if nothing else). Cheers. Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/#findComment-1148103 Share on other sites More sharing options...
johnny86 Posted December 16, 2010 Share Posted December 16, 2010 Add this to your <head> tags </head>: <style type="text/css> #row_container { clear: both; } #img_row { list-style-type: none; } #image { display: block; } #li_row { position: relative; float: left; } </style> And try changing your code to: <?php mysql_select_db($database_connuser, $connuser); $query_rsuniqueid = "SELECT * FROM gallery GROUP BY userid"; $rsuniqueid = mysql_query($query_rsuniqueid, $connuser) or die(mysql_error()); $row_rsuniqueid = mysql_fetch_assoc($rsuniqueid); $totalRows_rsuniqueid = mysql_num_rows($rsuniqueid); echo '<div id="row_container"><ul id="img_row">'; do { $caption = $row_rsuniqueid['caption']; $file_path = $row_rsuniqueid['file_path']; $userid = $row_rsuniqueid['userid']; echo'<li id="li_row"><a href="usersgallery.php?id='.$userid.'"><img border="0" src="../phpgallery/js/resize.php?src=gallery/'.$userid.'/'.$file_path.'&h=80&w=80&zc=1" alt="'.$caption.'" class="bordered" id="image"/>Add some text under image...</a></li> '; } while ($row_rsuniqueid = mysql_fetch_assoc($rsuniqueid)); echo '</ul></div>' $rows = mysql_num_rows($rsuniqueid); if($rows > 0) { mysql_data_seek($rsuniqueid, 0); $row_rsuniqueid = mysql_fetch_assoc($rsuniqueid); } ?> Link to comment https://forums.phpfreaks.com/topic/221861-display-text-underneath-each-printed-image/#findComment-1148109 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.