Images are displaying vertically rather horizontally

Question

Update: After looking at my HTML code in browser I figure out I need to only run the SQL code inside php just once in foreach loop and the images will be displayed horizontally. I was wondering how do I make that sql code run only once in that loop?

When I write the below code inside foreach ($ffs as $ff) {

Code:

echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
    
echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
echo "<p>{$Data[$increaseForText]["_desc"]}<p>";

So when this code is inside that foreach loop the images displays in vertical and I want my images to be displayed in horizontal (one next to other). But, if I remove that code from foreach and put it outside foreach code the image are displayed horizontally and works fine. I have tried CSS to display the image horizontally, but it only works if I remove that code from foreach. For some reason the above code (In foreach) somehow forcing the images to display in vertical, so no matter what I do it displays in vertical (the images).

I can't put my code outside foreach. I know I can use foreach to loop through my SQL code and it works fine, but the thing is I want it to work like first load images then first row only from sql, then 2nd image and 2nd row from sql and for that to make it work the only way is to put inside foreach my sql code, so it loads one at a time or else if I put it outside foreach It will load all the data of sql at once (1 row to 9 let's say) then all the images which makes no sense. I am storing my images in my hosting website files.

My question is how do I force my images to display horizontally one next to other?

My code:

    <?php
    session_start();
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    require "navigationbar.php";
    require "testing.php";
    ?>
    <html>
    <head>
    <link rel="stylesheet" href="userprofilestyl.css">
    
    </head>
    <body>
    <hr>
    
    <?php
    
    global $username;
    //username to get data of specific user
    $username = $_SESSION['name'];
    
    //to get image by username
    $image = "images/$username";
    global $increaseForText;
    $increaseForText = 0;
    
    function listFolderFiles($dir, $username, $increaseForText)
    {
    
       //getting images
        $ffs = scandir($dir);
    
        unset($ffs[array_search('.', $ffs, true)]);
        unset($ffs[array_search('..', $ffs, true)]);
        // prevent empty ordered elements
        if (count($ffs) < 1) {
            return;
        }
    
        $column_count = 0;
        $sql = "select  username_for_info, _name, _desc
        from info_desc where username_for_info = '$username'";
        try {
            require "testing.php";
    
            $stmt = $conn->prepare($sql);
            $stmt->execute();
    
            $Data = $stmt->fetchAll(PDO::FETCH_ASSOC);
            echo '<div class="image-container">';
    
            foreach ($ffs as $ff) {
    
                //select data from database
    
                $s = "'<li>'.$ff";
    
                $saving = "$dir/$ff";
    
                $string = "$saving";
                global $string_arr;
                $string_arr = (explode("/", $string));
    
                $sav;
                $sav = '<li>' . $ff;
    
                global $sa;
                $sa = "$ff";
    
                if (is_dir($dir . '/' . $ff)) {
                    listFolderFiles($dir . '/' . $ff, $username, $increaseForText);
                }
               //printing image

                if (is_file($saving)) {
                    echo '<img src="' . $saving . ' " width="100" height="100" alt="Random image"   />';
                }
               //printing text

                echo "<h4 class='text-right'>{$Data[$increaseForText]["username_for_info"]}</h4>";
    
                echo "<h2>{$Data[$increaseForText]["_name"]}</h2>";
                echo "<p>{$Data[$increaseForText]["_desc"]}<p>";
    
                $increaseForText++;
    
            }
    
        } catch (PDOException $e) {
            echo '{error":{"text":' . $e->getMessage() . '}}';
        }
        echo '</div>';
    
    }
    listFolderFiles($image, $username, $increaseForText);
    
    ?>
    </body>
    </html>

**Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 03 '20 at 11:48

score 0 · Answer 1 · answered Oct 03 '20 at 09:29

0

Add this to your css file:

.image-container{
  display:inline-flex;
  flex-flow:row;
}

This will change the flow of every element inside the div with the class "image-container" from vertically to horizontally

answered Oct 03 '20 at 09:29

Gustavo Martins dos Santos

43
5

I tried this but the image are still displayed vertical. – Haihv Oct 03 '20 at 09:34
Can you please post the html resulting once the page is fully rendered? – Gustavo Martins dos Santos Oct 03 '20 at 09:44
I didn't understand what you mean. Could you explain a bit? Do you want me to add a screenshot of my website when page loads after changing the code to what you said. Is that what you meant by `post the html resulting once the page is fully rendered`? – Haihv Oct 03 '20 at 09:46
In your page, press Ctrl + U this will show the html code of your page. Copy everything and send it in here, or post in somewhere else and send the link. You can use https://pastebin.com/ to paste your code. – Gustavo Martins dos Santos Oct 03 '20 at 10:09

score 0 · Answer 2 · answered Oct 03 '20 at 09:56

0

Foreach has nothing to do with making the images display vertically, there should be something wrong with the HTML or CSS. Make sure your tags are closed, such as your p and li tags.

There are alot of ways to make the images display horizontally, it would easier if you can send a jsfiddle or a code snippet.

But try this on .image-container:

display: flex !important;
   flex-flow: row;

answered Oct 03 '20 at 09:56

Jaocampooo

482
3
10

mam** Is there a place where I can post my php code? jsfiddle only seem for javascript, html and css. – Haihv Oct 03 '20 at 10:08
Unfortunately no, but you can post the html and css code with dummy images. I am pretty sure the foreach has nothing to do with its alignment – Jaocampooo Oct 03 '20 at 10:14
I had a look at my html code. I can't copy it for some reason, but the reason it's showing image vertically is because my sql code runs multiple times, so I need to force it to run only once inside for loop – Haihv Oct 03 '20 at 10:17

Images are displaying vertically rather horizontally

2 Answers2