Jump to content

Display images from Database

Revolutsio

By Revolutsio
in PHP Coding Help

 Share

Recommended Posts

Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted
6 minutes ago, Barand said:

Perhaps the path to the image is missing (we can't see your data). Does this work... 

<img class='w-100 mb-2 bg-dark' src=\"images/{$row['file_name']}\">

 

No

 

ok here is my full code..

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="grid.css">
    <title></title>
</head>
<body>
    <?php
    include 'config.php';
    ?>
    <div class="container">
        <div class="row">
        <div class="col">
            <div class="card bg-dark mb-4">
                <div class="card-header text-center">
                    <h2 class="text-uppercase">Last Completed</h2>
                </div>
                    <div class="card-body p-2">
                        <figure>
                        <img class="w-100 text-center" src="images/1.png">
                        <figcaption class="py-2 px-3">
                            
                            <div class="figcaption-title">>observer_</div>
                            <div>2 December 2020</div>
                            
                            
                        </figcaption>
                        </figure>
                        
                    
                </div>
            </div>
        </div>
<!-- Middle Column --->
        <div class="col">
            <div class="card bg-dark mb-4">
                <div class="card-header text-center">
                    <h2 class="text-uppercase">Game Collection</h2>
                </div>
                
                        <div class="card-body p-2">
                        <div class="row">
                        <div class="col-4 text-center p-3 align-self-top">
                        <?php $game="SELECT file_name, Game FROM images WHERE id='1'"; ?>                            
                            <img class="w-100 mb-2 bg-dark" src="uploads/1.png">                            
                        <?php foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>                            
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/2.png">
                            <?php $game="SELECT Game FROM images WHERE id='2'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/3.png">
                            <?php $game="SELECT Game FROM images WHERE id='3'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/4.png">
                            <?php $game="SELECT Game FROM images WHERE id='4'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/5.png">
                            <?php $game="SELECT Game FROM images WHERE id='5'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/6.png">
                            <?php $game="SELECT Game FROM images WHERE id='6'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/7.png">
                            <?php $game="SELECT Game FROM images WHERE id='7'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/8.png">
                            <?php $game="SELECT Game FROM images WHERE id='8'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/9.png">
                            <?php $game="SELECT Game FROM images WHERE id='9'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/10.png">
                            <?php $game="SELECT Game FROM images WHERE id='10'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/11.png">
                            <?php $game="SELECT Game FROM images WHERE id='11'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/12.png">
                            <?php $game="SELECT Game FROM images WHERE id='12'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/13.png">
                            <?php $game="SELECT Game FROM images WHERE id='13'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/14.png">
                            <?php $game="SELECT Game FROM images WHERE id='14'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/15.png">
                            <?php $game="SELECT Game FROM images WHERE id='15'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/16.png">
                            <?php $game="SELECT Game FROM images WHERE id='16'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                        <div class="col-4 text-center p-3 align-self-top">
                            <img class="w-100 mb-2 bg-dark" src="images/17.png">
                            <?php $game="SELECT Game FROM images WHERE id='17'";
                            foreach ($db->query($game)as $row) {
                                echo $row['Game'];
                            } ?>
                        </div>
                    </div>
                    </div>
            </div>
        </div>        
        <div class="col">
            <div class="card bg-dark mb-4">
                <div class="card-header text-center">
                    <h2 class="text-uppercase">Picture of the Day</h2>
                </div>
                <div class="card-body p-2">
                <?php $pic="SELECT file_name, Game FROM images ORDER BY RAND() LIMIT 1"; 
                 if($result = $db->query($pic)){
                    if($result->num_rows > 0){
                    }
                }
               while($row = $result->fetch_array()){
                   
                   ?>               
               <div class="text-center"><?php echo $row['Game']?></div>
                                                                            
               <?php } 
               // free result from memory
               mysqli_free_result($result);
                ?>
                   
                </div>
            </div>
        </div>
        
        
              
        </div>
    </div>

</body>
</html>

Here is the way i set up the database.

 

also i could show the code i use to upload the images

Screenshot 2022-03-22 181308.png

ginerjm Prolific Member

ginerjm

Posted
Posted

Show me the block of code that sets up your divs and does the query and makes the output.  I don't deal with images  I only deal with code that I can see and check.  Without a full block of logic to analyze I am wasting my time.

ginerjm Prolific Member

ginerjm

Posted
Posted (edited)

Way too much code. 

//  query for all id values and sort by id
//  no need to do a new query for each id!!!
$game = "SELECT file_name, Game FROM images 
			WHERE 1 
			order by id";
			
// run the query for all records
$qresults = $db->query($game);
//  provide a path name to the images if you are not already storing (and you shouldn't be anyway)
$pathname = (where images are save if not in the table column);
//  now loop thru all the query results and output the div to show them in 
while ($row = $qresults->fetch_assoc())
{
	echo "
		<div>
		<img class='w-100 mb-2 bg-dark' src='" . $pathname.$row['filename'] . "'>
		<center>$row['Game']</center>
		</div>
		";
}

This is what I think you need to do   Hopefully it is correct mysqli code ( I said already that I don't use mysqli)  Plain and simple without all of the div tags you are using (why?) but it should show you all the results including a path name as suggested by Barand above.

Edited by ginerjm
ginerjm Prolific Member

ginerjm

Posted
Posted

My typo .  Correct    $row['file_name']  please.

 

Suggestion for the future.  Don't use upper and lower cases in your table names and php variable names.  Just makes for a headache when trying to debug your code because you used the wrong letter.

Barand Prolific Member

Barand

Posted
Posted

I created an "images" table like yours. Here is basic working code sample. The folder containing the script has a subfolder "images". 

<?php
include 'config.php';

$res = $db->query("SELECT file_name
                        , game
                   FROM images     
                   ");
                   
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type='text/css'>
    .wrapper {
        text-align: center;
        padding: 20px;
        border-bottom: 2px solid gray;
    }
</style>
</head>
<body>
    <?php
        foreach ($res as $row) {
            echo "<div class='wrapper'>
                  <img src='images/{$row['file_name']}' alt='Game image'> 
                  <br>
                  {$row['game']} 
                  </div>
                  ";
        }
    ?>
</body>
</html>

 

  • Like 1
Strider64 Advanced Member

Strider64

Posted
Posted (edited)

My advice take about an hour or two to learn PDO and here's a good link that I still use sometime - https://phpdelusions.net/pdo

It will save you a lot of time in the long run.

I would also separate the logic as it will also help.

Here's an example of my photo gallery and I start off with the display: 

    <div class="container">

        <?php
        $count = 0;
        foreach ($cms as $record) {
            echo '<p class="hideContent">' . $record['content'] . '</p>';
            echo '<div class="' . $displayFormat[$count] . '">';
            echo '<div class="gallery-item">';
            echo '<div class="images"><img src="' . $record['image_path'] . '" alt="Photo1" data-exif="' . $record['Model'] . ' ' . $record['ExposureTime'] . ' ' . $record['Aperture'] . ' ' . $record['ISO'] . ' ' . $record['FocalLength'] . '" width="800" height="534">';
            echo '</div>';
            $count++;
            echo '<div class="title">' . '<h1 class="pictureHeading">' . $record['heading'] . '</h1>' . '<span class="exifInfo">' . $record['Model'] . '</span>' . '</div>';
            echo '</div>';
            echo '</div>';

        }
        ?>

    </div>

Here's retrieving the data (The PHP is at the top): 

if (isset($_GET['page']) && !empty($_GET['page'])) {
    $current_page = urldecode($_GET['page']);
} else {
    $current_page = 1;
}

$per_page = 12; // Total number of records to be displayed:
$total_count = CMS::countAllPage('blog'); // Total Records in the db table:

/* Send the 3 variables to the Pagination class to be processed */
$pagination = new Pagination($current_page, $per_page, $total_count);

/* Grab the offset (page) location from using the offset method */
$offset = $pagination->offset();
//echo "<pre>" . print_r($offset, 1) . "</pre>";
//die();
/*
 * Grab the data from the CMS class method *static*
 * and put the data into an array variable.
 */
$cms = CMS::page($per_page, $offset, 'blog');

My GitHub repository for this https://github.com/Strider64/phototechguru

Proof that it works - https://phototechguru.com/photogallery.php

This is just an example, but in my opinion keep your logic separated and using PHP PDO instead of mysqli will save you a lot of headaches in the long run, but do what you want with what I posted. I'm more into photography than developing lately and with warmer weather arriving it will only get worse. 🤣

Edited by Strider64
Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted
16 hours ago, Barand said:

I created an "images" table like yours. Here is basic working code sample. The folder containing the script has a subfolder "images". 

<?php
include 'config.php';

$res = $db->query("SELECT file_name
                        , game
                   FROM images     
                   ");
                   
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type='text/css'>
    .wrapper {
        text-align: center;
        padding: 20px;
        border-bottom: 2px solid gray;
    }
</style>
</head>
<body>
    <?php
        foreach ($res as $row) {
            echo "<div class='wrapper'>
                  <img src='images/{$row['file_name']}' alt='Game image'> 
                  <br>
                  {$row['game']} 
                  </div>
                  ";
        }
    ?>
</body>
</html>

 

Thank for this

Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted
2 minutes ago, ginerjm said:

It is not that you ask questions.  It is when you are provided solutions and you don't use them.  It is when you are asked to show how you used that code so that we can help debug it and you don't.

I put all the code above that i had 

ginerjm Prolific Member

ginerjm

Posted
Posted

I was frustrated with you when I gave you my version of what should work for you and you complained that it didn't run properly but you NEVER want to show how you included it into your script.  How can we help you if you don't show us what you did????

Enough.  

Are you happy?  If not post the part of the code that is giving you a problem.  It will be be PHP code, not CSS or JS or HTML.  And if there is an error message put a line (comment) in that post telling us which line is the error line.  Then we can see it and probably tell you what is wrong.

Revolutsio Regular Member

Revolutsio

Posted
  • Author
Posted
17 minutes ago, ginerjm said:

I was frustrated with you when I gave you my version of what should work for you and you complained that it didn't run properly but you NEVER want to show how you included it into your script.  How can we help you if you don't show us what you did????

Enough.  

Are you happy?  If not post the part of the code that is giving you a problem.  It will be be PHP code, not CSS or JS or HTML.  And if there is an error message put a line (comment) in that post telling us which line is the error line.  Then we can see it and probably tell you what is wrong.

I am sorry for not understanding you, Thank you for your Help

gizmola Prolific Member

gizmola

Posted
Posted

The last screenshot I saw was of a bunch of broken image links.  That suggests a couple of possible problems:

 

  • Your database code is wrong and the image names are null/empty/wrong.
  • the images are not available in "webspace" relative to the webroot.

 

Pretty much any browser (chrome/firefox/safari/edge) has webtools that are either built in or available via plugin/configuration.  You need to look at those broken links and determine which of the two problems I listed is the one effecting you.  Since these images are being stored statically, what is a valid url in your your img src attribute that will display any of the images you know are there.  Put in the raw html and insure that an image displays.   At that point you just need to conform your code to integrate the variable image file name being stored in your database table.

 

One thing that jumps out at me is your problematic use of a relative path to images.

This is not what you want: 

                            <img class="w-100 mb-2 bg-dark" src="uploads/1.png">

What you want is a path relative to the "webroot" of your website.  The webroot is a concept created by whatever is serving your website.  Things from the webroot on down the hierarchy define "web space".  Web space is what is exposed to clients browsing your site.  So let's assume that your server directory structure looks like this:

  

/
└── var/
    └── www/
        └── yoursite/
            ├── upload
            ├── images
            ├── js
            └── css


Your webroot configuration for "yoursite" would configured within your web server to be "/var/www/yoursite".

This means that to reference an image name 1.png in the images directory, one would use this relative path (from the root). 

  <img class="w-100 mb-2 bg-dark" src="/images/1.png">

Notice the leading backslash!  That indicates the root of the site, and for static assets, you want to use a path that is relative to the root, not to the location of whatever html page this markup is in.

All of this has to do with how html and web servers and web browsers work.  You can certainly have problems with your PHP code running on the server, but you can also have code that is essentially working, but is outputting bad/broken/problematic markup.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.