Help! Trying to put images in rows

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
harkly
Forum Newbie
Posts: 6
Joined: Sat Apr 18, 2009 10:00 pm

Help! Trying to put images in rows

Post by harkly »

I want to put my images in rows of 4 can anyone help me with this?

Right now I have the images pulling up in one long column.

Code: Select all

//pulls info for art work of the artist above 
 
            echo "<div id='title'>";
            echo "<h1>Works <br><img src='image/smLine.jpg'></h1></div>";
    
            $result2 = mysql_query("SELECT * FROM image WHERE artid LIKE '$search' ORDER BY title") or die(mysql_error());
            $num_rows=mysql_num_rows($result2);
 
              if ($num_rows != "0")
                {
                  $count = count(0);
                  while ($r=mysql_fetch_array($result2))
                    {   
                      $imgid=$r['imgid'];
                      $artid=$r['artid'];
                      $title=$r['title'];
                      $dtxt_1 =$r['dtxt_1'];
                      $dt=$r['dt'];
                      $medid=$r['medid'];
                      $size_inch=$r['size_inch'];
                      $size_cm=$r['size_cm'];
                      $musid=$r['musid'];
                      $movid=$r['movid'];
                      $genid=$r['genid'];
                      $perid=$r['perid'];
                      $bio=$r['bio'];
                      $keywords=$r['keywords'];
                      $notes=$r['notes'];
                      $verified=$r['verified'];
 
                    //display the row
 
                      echo "<div id='artContent'>";
                        echo "<span class='image'>";
                          echo $count++ ;
                          echo ". <div class=img-shadow><a href='image/$artid/$imgid.jpg' class='thickbox' title='$title by $fullName'>
                                  <img src='image/thumb/$artid/$imgid.jpg' border=0 width=75 height='100' title='$title by $fullName' align=left valign=top></a></div></span>";
 
 
                        echo "<span class='info'>";
                         echo "<a href='image.php?imgid=$r[imgid]' title='$title by $fullName'>".$title."</a> <br>".$dt."<br>".$medid."<br>".$bio." ";
                      echo "</span></div>";
 
                    }
                }

I have tried a few different ways to get them in a row

here is the very short version I have tried but could not get to work.

Code: Select all

$i = 1; 
while(...) { 
  //... 
  if ($i % 4) { 
    echo "<br />"; 
  } 
  $i++; 
} 
 
The above code with my code -

Code: Select all

//pulls info for art work of the artist above 
 
            echo "<div id='title'>";
            echo "<h1>Works <br><img src='image/smLine.jpg'></h1></div>";
    
            $result2 = mysql_query("SELECT * FROM image WHERE artid LIKE '$search' ORDER BY title") or die(mysql_error());
            $num_rows=mysql_num_rows($result2);
 
              if ($num_rows != "0")
                {
                  $count = count(0);
                  $i = 1; 
                  while ($r=mysql_fetch_array($result2))
                    {   
                      $imgid=$r['imgid'];
                      $artid=$r['artid'];
                      $title=$r['title'];
                      $dtxt_1 =$r['dtxt_1'];
                      $dt=$r['dt'];
                      $medid=$r['medid'];
                      $size_inch=$r['size_inch'];
                      $size_cm=$r['size_cm'];
                      $musid=$r['musid'];
                      $movid=$r['movid'];
                      $genid=$r['genid'];
                      $perid=$r['perid'];
                      $bio=$r['bio'];
                      $keywords=$r['keywords'];
                      $notes=$r['notes'];
                      $verified=$r['verified'];
 
                    //display the row
 
          if ($i % 4) { 
                      echo "<div id='artContent'>";
                        echo "<span class='image'>";
                          echo $count++ ;
                          echo ". <div class=img-shadow><a href='image/$artid/$imgid.jpg' class='thickbox' title='$title by $fullName'>
                                  <img src='image/thumb/$artid/$imgid.jpg' border=0 width=75 height='100' title='$title by $fullName' align=left valign=top></a></div></span>";
 
 
                        echo "<span class='info'>";
                         echo "<a href='image.php?imgid=$r[imgid]' title='$title by $fullName'>".$title."</a> <br>".$dt."<br>".$medid."<br>".$bio." ";
                      echo "</span></div>";
          } 
          $i++;
                    }
                }
 
Can anyone help me put my images in a row of 4?

img1 img2 img3 img4
img5 img6 img6 img7
img8 img9 img10 img11
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Help! Trying to put images in rows

Post by McInfo »

Option 1: Use CSS to make floating containers that wrap automatically.

Code: Select all

<html>
<head>
<title>Floating Image Containers</title>
<style type="text/css">
.outer {
    width: 405px;
    height: 305px;
    background-color: #CCC;
    }
.inner {
    float: left;
    width: 95px;
    height: 95px;
    margin: 5px 0 0 5px;
    background-color: #678;
    color: #FFF;
    font-size: 2em;
    }
</style>
</head>
<body>
 
<div class="outer">
    <div class="inner">A</div>
    <div class="inner">B</div>
    <div class="inner">C</div>
    <div class="inner">D</div>
    <div class="inner">E</div>
    <div class="inner">F</div>
    <div class="inner">G</div>
    <div class="inner">H</div>
    <div class="inner">I</div>
    <div class="inner">J</div>
    <div class="inner">K</div>
    <div class="inner">L</div>
</div>
 
</body>
</html>
Option 2: Use PHP to insert a break at a regular interval.

Code: Select all

<html>
<head><title>Wrapping Table Rows</title></head>
<style type="text/css">
td {
    width: 40px;
    height: 40px;
    background-color: #DEF;
}
</style>
<body>
 
<table cellspacing="4" cellpadding="0" border="1">
<tr>
<?php
$cells_wide = 4;
$cells_max = 12;
for ($c = 0; $c < $cells_max; $c++) {
    if (0 < $c && 0 == $c % $cells_wide) {
        echo '</tr><tr>';
    }
    echo '<td>&nbsp;</td>';
}
?>
</tr>
</table>
 
</body>
</html>
Related topic: viewtopic.php?p=533291#p533291

Edit: This post was recovered from search engine cache.
Last edited by McInfo on Mon Jun 14, 2010 3:27 pm, edited 1 time in total.
harkly
Forum Newbie
Posts: 6
Joined: Sat Apr 18, 2009 10:00 pm

Re: Help! Trying to put images in rows

Post by harkly »

Thanks!

I just can't get it work. Tried very many different versions but just can't get it to work with my php code. Always get a single line. Can anyone see what I am doing wrong?

Code: Select all

<html>
<head><title>Wrapping Table Rows</title></head>
<style type="text/css">
  td {width: 40px; height: 40px; background-color: #DEF;}
</style>
 
<body>
 
<table cellspacing="4" cellpadding="0" border="1">
<tr>
 
<?php
 
      include("library/login.php");
      login();
      mysql_select_db("theartdb"); 
 
 
 
            $result2 = mysql_query("SELECT * FROM image WHERE artid LIKE 'AR3614' ORDER BY title") or die(mysql_error());
            $num_rows=mysql_num_rows($result2);
 
                  while ($r=mysql_fetch_array($result2))
                    {   
                      $imgid=$r['imgid'];
                      $artid=$r['artid'];
                      $title=$r['title'];
                      $dtxt_1 =$r['dtxt_1'];
                      $dt=$r['dt'];
                      $medid=$r['medid'];
                      $size_inch=$r['size_inch'];
                      $size_cm=$r['size_cm'];
                      $musid=$r['musid'];
                      $movid=$r['movid'];
                      $genid=$r['genid'];
                      $perid=$r['perid'];
                      $bio=$r['bio'];
                      $keywords=$r['keywords'];
                      $notes=$r['notes'];
                      $verified=$r['verified'];
 
$cells_wide = 4;
$cells_max = 12;
 
for ($c = 0; $c < $cells_max; $c++) {
    if (0 < $c && 0 == $c % $cells_wide) {
        echo "</tr><tr>";
 
    }
 
    echo "<td>
          <a href='image/$artid/$imgid.jpg' class='thickbox' title='$title by $fullName'>
          <img src='image/thumb/$artid/$imgid.jpg' border=0 width=75 height='100' title='$title by $fullName' align=left valign=top></a>
          <a href='image.php?imgid=$r[imgid]' title='$title by $fullName'>".$title."</a> <br>".$dt."<br>".$medid."<br>".$bio." 
          </td>";
 
}}
 
 
?>
 
</tr></table>
 
</body></html>
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Help! Trying to put images in rows

Post by McInfo »

I obviously need to do something different because that is the second time that example has failed to effectively communicate the intended idea.

Edit: This post was recovered from search engine cache.
Last edited by McInfo on Mon Jun 14, 2010 3:28 pm, edited 1 time in total.
harkly
Forum Newbie
Posts: 6
Joined: Sat Apr 18, 2009 10:00 pm

Re: Help! Trying to put images in rows

Post by harkly »

It's probably my fault, pretty new at PHP, I may have also mixed up my columns vs rows in my original question.

Seeing a lot on how things are related to each other with your php example.

What I have is a database that has 1000's of artist and 1000's of images. I want to have a page that pulls all the images of a selected artist and displays them in 4 columns and however many rows that are needed. Some artists only have 1 image while others have 200. Anyway I can do that?
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: Help! Trying to put images in rows

Post by McInfo »

Here is a more detailed example.

Code: Select all

<html>
<head>
<title>A Better Example</title>
</head>
<body>
 
<?php
// Establishes a database connection
require_once 'db_pconnect.php';
 
// Sets the database record to start at
$db_row_start = 0;
 
// Sets the maximum number of images to return per page
$db_row_get = 24;
 
// Forms a query that returns more than one record
$query = 'SELECT * FROM `image` ORDER BY `title` '
       . 'LIMIT '.$db_row_start.','.$db_row_get;
 
// Executes the query and assigns the returned resource to $result
if ($result = mysql_query($query))
{
    // Sets the number of cells to display in each HTML table row
    $cells_wide = 4;
   
    // Opens a new HTML table
    ?><table cellspacing="0" cellpadding="3" border="1"><?php
   
    // Opens the first HTML row
    ?><tr><?php
   
    // Initializes the current cell number
    $c = 0;
   
    // Loops through each database table row
    while ($row = mysql_fetch_assoc($result))
    {
        /*
         * Determines if the current cell is the first cell of a
         * table row but not the first cell of the first row
         */
        if (0 < $c && 0 == $c % $cells_wide)
        {
            // Closes the previous HTML table row and opens a new row
            ?></tr><tr><?php
        }
       
        // Assigns each field to a variable of the same name (Not a good idea)
        extract($row);
       
        // Opens a new HTML table cell
        ?><td><?php
       
        // Writes the contents of the current cell
        echo "<div>$imgid</div><div>$title</div>";
       
        // Closes the current HTML table cell
        ?></td><?php
       
        // Increments the current cell number
        $c++;
    }
   
    /*
     * May require a way to insert cleanup <td>s if the total number of cells
     * is not evenly divisible by the number of cells per row.
     */  
   
    // Closes the last HTML table row (or the first if there are no records)
    ?></tr><?php
   
    // Closes the HTML table
    ?></table><?php
}
// What to do if myqsl_query() returns FALSE instead of a resource
else
{
    /*
     * Says "Query failed." followed by an error description.
     * Don't echo mysql_error() on public sites.
     */
    ?><p>Query failed.</p><p><?php echo mysql_error(); ?></p><?php
}
?>
 
</body>
</html>
Edit: This post was recovered from search engine cache.
Post Reply