Gallery Of Blog Feed Interface Problem

[ikkikevin]

Heeey all,

So I'm building a blog feed that echo's 9 images with a title above each image. (3 on each row) The images and the title come from a database and I'm using while and mysql_fetch_ass oc to show it. However, with my code it shows all the title and images on 1 vertical colomun... How can i fix this?

This is how it looks like right now: http://i48.tinypic.com/2utssc0.png

This is how my code looks like for showing the images and title:

<?php 
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db ('databaseimage') or die(mysql_error());

$image = mysql_query("SELECT * FROM store ORDER BY id DESC");

while ($row = mysql_fetch_assoc($image))
{
echo "<a class=\"blog_widget_02\" href=\"blog.php?id=$row[id]\"> <br/>".$row['name']." <br/><img src=\"image.php?id=$row[id]\"/ height=\"210\" width=\"302\"><br/></a>";
}
?>

Thank youuu!

[Rabbit]

Please use code tags when posting code.

Use CSS to float the images within a div. So you'll have 3 divs, each with 3 images inside floated next to each other.

[ikkikevin]

Oooh sorry, I didn't even know it was possible to use code tags..

Where do I have to put the div tags then?
Because the code above doesn't show the code of each image.. it just grabs all the images from the database with a limit of 9 images..

The code for getting the images is this (image.php):

<?php
include 'core/init.php';

$image = stripslashes($_REQUEST['id']);
$query = mysql_query("SELECT * FROM store WHERE id = '".$_GET['id']."'");
$row = mysql_fetch_assoc($query);
$imagebytes = $row['image'];

//header('Content-type: image/' . $row->Type);

header("Content-type: image/jpeg");
echo "$imagebytes";
?>

[Anas Mosaad]

It's exactly as Rabbit pointed out in his post. You need to wrap each image box in a div, style that div giving (width, height, float) and wrap the divs in a bigger container that have a width of the combined width of the three divs in a row plus all paddings and margins. Something like this:

{
echo "<div class='images-container'>";
while ($row = mysql_fetch_assoc($image))
{
echo "<div class='images-box'>";
echo "<a class=\"blog_widget_02\" href=\"blog.php?id=$row[id]\"> <br/>".$row['name']." <br/><img src=\"image.php?id=$row[id]\"/ height=\"210\" width=\"302\"><br/></a>";
echo "</div>";
}
echo "</div>";

You should include the styles for images-container & images-box classes in your CSS. Something like this:

.images-container {
   width: 907px;
}
.images-box {
   width: 907px;
   height: 250px;
   float: left;
}

Finally, you need to escape the $image variable before passing to the database to avoid SQL injection attacks.

[ikkikevin]

How do I exit the $image?

What I have now so far is this:

  <?php 
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db ('databaseimage') or die(mysql_error());
 
$image = mysql_query("SELECT * FROM store ORDER BY id DESC");
 
{
echo "<div class='images-container'>";
while ($row = mysql_fetch_assoc($image))
{
echo "<div class='images-box'>";
echo "<a class=\"blog_widget_02\" href=\"blog.php?id=$row[id]\"> <br/>".$row['name']." <br/><img src=\"image.php?id=$row[id]\"/ height=\"210\" width=\"302\"><br/></a>";
echo "</div>";
}
echo "</div>";
?>

And I copied your css..

[Anas Mosaad]

Sorry Ikki, I'm not sure I got what do you mean by exit? do you mean escaping?! This can be done using prepare or by escaping the input strings before passing the the DB engine.

[ikkikevin]

Woops, sorry , yeah I meant escaping. And how do I do that? It still doesn't work, I'm a very beginner in php btw..

[ikkikevin]

Ooh never mind, I have solved the problem, thankss!!

[Anas Mosaad]

I'm not sure how you solved your problem but you may use <pre>mysql_real _escape_string </pre> function to escape a specific string.

[ikkikevin]

I just used this code:

<style type="text/css">
.blog_widget_02 {
display: inline-block;
*display: inline;
*zoom: 1;
width: 200px;
}
</style>
<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db ('databaseimage') or die(mysql_error());

$image = mysql_query("SELECT * FROM store ORDER BY id DESC");

$i = 0;
while ($row = mysql_fetch_assoc($image))
{
$i++;
echo "
<a class=\"blog_widget_02\" href=\"blog.php?id=".$row['id']."\">
".$row['name']."<br/>
<img src=\"image.php?id=".$row['id']."\"/ height=\"200\" width=\"200\">
</a>
";
if(is_int($i/3)){
echo "<br/>";
}
}
?>

It seems to work so..I'm happy!