Sql help

sql

[mladams]

Hi, New here

I have the following code that shows images from a database on to a php page.
<snipped url>

// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");

// Location where the images are stored
$file_path = 'http://www.mysite.com/holidays/files/photo_big/';
 
// Fetch the data for the pictures
$sql = "SELECT `photo_id`, `photo_caption_1` , `photo_listing`
  FROM `listing_photo`
WHERE `photo_listing`= 127
LIMIT 10";
$result = mysql_query($sql) or trigger_error(mysql_query(), E_USER_ERROR);
 
// Display each picture
while($row = mysql_fetch_assoc($result)){
 $src = $file_path . $row['photo_id'] . ".jpg";
$number = 2;
if($number % 2 == 0) {
 echo '$number';
}
else {
 echo '$number';
}
?>

 <div class="Image">
 <img src="<?=$src?>" alt="<?=$row['photo_caption_1']?>" title="<?=$row['photo_caption_1']?>"><br>
 <span><?=$row['photo_caption_1']?></span>
 </div>

<?php } ?>

This shows a single column, I would like it to show in 2 columns.

I am trying the $number bit but cant get it to work.

Does anyone know how to fix this?

Regards

[edited by: whoisgregg at 10:20 pm (utc) on Mar 10, 2010]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

[rocknbil]

Welcome aboard mladams, this is really a PHP question. What you want, instead of mixtures of HTML and PHP, is something like this, outputting once. I don't know what is going on with $number, as that's always going to be 2. . . . . and it won't show the value of $number because you have it single quoted, which won't interpolate the value.

<?php 
$sql = "SELECT `photo_id`, `photo_caption_1` , `photo_listing` 
FROM `listing_photo` WHERE `photo_listing`= 127 LIMIT 10"; 
$colcount=0; 
$imgContent=NULL; 
$result = mysql_query($sql) or trigger_error(mysql_query(), E_USER_ERROR); 
// 
while($row = mysql_fetch_assoc($result)){ 
 $src = $file_path . $row['photo_id'] . ".jpg"; 
 $cap = $row['photo_caption_1']; 
 // Set the CSS selector width for Image so it only fits two in  
 // the selector "column". Then you won't need the meaningless <br>. 
 // Then do: .Image p { margin 0; padding 6px 0 0 0; text-align:center; } 
 // span also has no semantic "meaning." This solution also  
 // requires a clearing element: .clear-div { clear:both; } 
 if ($colcount == 0) { $imgContent .= '<div class="column">'; } 
 $imgContent .= " 
 <div class=\"Image\"> 
 <img src=\"$src\" alt=\"$cap\" title=\"$cap\"> 
 <p>$cap</p> 
 </div> 
 "; 
 $colcount++; 
 if ($colcount>=2) { $colcount=0; $imgContent .= '<div class="clear-div"></div></div>'; } 
} 
// If there is an odd number of images, close the last div 
if ($colcount > 0) { $imgContent .= '<div class="clear-div"></div></div>'; } 
if ($imgContent) { echo $imgContent; } 
else { echo '<p>No images to display.</p>'; } 
?> 

May contain syntax errors, don't see any at this late hour.

Hopefully, all your images will be .jpg's. :-)

[mladams]

Hi Rocknbil thanks for the help.

Sorry, I am new to all this and I dont know what this means.

// Set the CSS selector width for Image so it only fits two in
// the selector "column". Then you won't need the meaningless <br>.
// Then do: .Image p { margin 0; padding 6px 0 0 0; text-align:center; }
// span also has no semantic "meaning." This solution also
// requires a clearing element: .clear-div { clear:both; }

Your code, as is, returns this.

<div class="column">
<div class="Image">
<img src="115.jpg" alt="Lounge" title="Lounge">
<p>Lounge</p>
</div>

<div class="Image">
<img src="116.jpg" alt="Pool" title="Pool">
<p>Pool</p>
</div>
<div class="clear-div"></div></div><div class="column">
<div class="Image">
<img src="117.jpg" alt="Shaded Seating" title="Shaded Seating">
<p>Shaded Seating</p>
</div>

<div class="Image">
<img src="118.jpg" alt="Naya" title="Naya">
<p>Naya</p>
</div>
<div class="clear-div"></div></div><div class="column">
<div class="Image">
<img src="119.jpg" alt="Twin Bedroom" title="Twin Bedroom">
<p>Twin Bedroom</p>
</div>

<div class="Image">
<img src="120.jpg" alt="Villa Helena Javea" title="Villa Helena Javea">
<p>Villa Helena Javea</p>
</div>
<div class="clear-div"></div></div>

Regards

[edited by: jatar_k at 5:31 pm (utc) on Mar 11, 2010]
[edit reason] pasted code, no urls thanks [/edit]

[rocknbil]

Sweet, it works!

OK you have a column div (which should really be named "row", if you change it, change it in the CSS example below) and two divs nested inside it. like

------- column ---------
--- div 1 --- div 2 ----
------------------------
------- column ---------
--- div 1 --- div 2 ----
------------------------
------- column ---------
--- div 1 --- div 2 ----
------------------------

When you output, you output a full html document, correct? Your output should look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
[your page content goes here]
</body>
</html>

In the file mystyles.css, you will have CSS selectors to style your output. Given what you've told us, the entire contents could be something like this:

.column { width: 600px; margin:auto; }
.Image { width: 300px; float: left; }
.Image p { margin 0; padding 6px 0 0 0; text-align:center; }
.clear-div { clear:both; }

The styles of the CSS is what you will use to construct rows and get two columns across. In the above example, you may find that two instances .Image don't actually "fit" inside .column and creates a single column. The box model of browsers is sometimes difficult, if this happens, experiment changing the width of column to 601px, 605px, etc. until it fits two across.

More info in the CSS forum [webmasterworld.com] and a quick start on CSS at W3C Schools [w3schools.com].