Displaying data from database using PHP in an ordered fashion

Question

I am trying to build a web page that has 6 rows of images. Each row has 4 images and each image has a caption right below it. So it goes something like this:

IMAGE IMAGE IMAGE IMAGE

TEXT TEXT TEXT TEXT

IMAGE IMAGE IMAGE IMAGE

TEXT TEXT TEXT TEXT

and so on.

This is my code:

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    while ($rows = $resultSet->fetch_assoc()) {
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<img class=images src=$image> <p  class=texts>$text</p>";
    }
}           
?>

Both classes are set to display: inline-block. The code prints out each image next to the text. The text should be below the image. I am trying to think of ways of displaying the images and the texts in the proper format, but I can't seem to think of any solutions at the moment. Anyone can give me some insight?

@BigScar If I make a table, how would that work? The while loop will print the image once, then go to the next row and print the text. The loop will loop again and print another image in the same row and print the text in the next row. This will keep on until I have more than 4 images in the same row and more than 4 texts in the same row. — user5209769
– user5209769, Commented Oct 9, 2015 at 20:25
@NenadVracar If I try display: block, then each image and text will print on separate lines and not on the same line — user5209769
– user5209769, Commented Oct 9, 2015 at 20:27

Giovanni Far · Accepted Answer · 2015-10-09 20:31:17Z

0

Set only the wrapper class with the display: inline-block rule

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    while ($rows = $resultSet->fetch_assoc()) {
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<div class='wrapper'>";
        echo "<img class=images src=$image> </br> <p  class=texts>$text</p>";
        echo "</div>";
    }
} 
?>

answered Oct 9, 2015 at 20:31

Giovanni Far

1,6436 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Tan · Accepted Answer · 2015-10-09 20:44:01Z

0

You should be able to achieve this using divs. The following code will add in a row ever

<?php
$resultSet = $db->query("SELECT * FROM Articles");
if ($resultSet->num_rows != 0) {
    $count = 0;
    while ($rows = $resultSet->fetch_assoc()) {
        $num_in_row = 4; // Number of items you want in each row
        if($count % $num_in_row == 0){
            echo '<div class="row">'; // if the row already has 4 items, add a new row.
        }
        $image = $rows["image"];
        $text = $rows["text"];
        echo "<span class='wrapper'>";
        echo '<img class="images" src='.$image.'> <div class="texts">'.$text.'</p>';
        echo "</span>";
        if($count % $num_in_row == ($num_in_row-1)){
            echo '</tr>';
        }
        $count++;
    }
} 
?>

That should give you a result that looks like the jsfiddle

edited Oct 9, 2015 at 20:44

answered Oct 9, 2015 at 20:27

Jon Tan

1,5413 gold badges17 silver badges36 bronze badges

1 Comment

Jon Tan Over a year ago

I've edited the code. Basically it has a feature to add in a new row every time the count is a multiple of four. I haven't tried it yet, but let me know what you see and I'll reply when I get home

Collectives™ on Stack Overflow

Displaying data from database using PHP in an ordered fashion

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related