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. Quote Link to comment Share on other sites More sharing options...
litebearer Posted December 16, 2010 Share Posted December 16, 2010 please show your existing code Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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. Quote Link to comment 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); } ?> 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.