How to create PHP MySQL image gallery

Last updated on February 14th, 2022 at 04:24 pm

Simple PHP mysql example image gallery

Here is an example of creating a photo gallery, using PHP and MySQL. You can also view and add image tags. Before we begin, you can follow the same steps mentioned in How to upload image to MYSQL using PHP to upload images and understand how images are stored in MySQL database.

This script can be used just to view those uploaded images with some basic css like an image gallery. In order for you to just view these images you can copy paste the below code and update the table/mysql settings. That way you have 2 different locations one will be an admin view and other will be a user view.

<html><head>
<title>MySQL Blob Image Gallery Example</title>
</head>
<body>
<style>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 23.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
<?php
$db_host = 'localhost'; // don't forget to change
$db_user = '';
$db_pwd = '';

$database = 'mydata_base';
$table = 'My_new_blob_gallery';

$con=mysqli_connect($db_host, $db_user, $db_pwd,$database);
if (isset($msg)) // this is special section for
                 // outputing message
{
?>
<p style="font-weight: bold;"><?php echo $msg ?>
<br />
<a href="<?php echo $_SERVER['SCRIPT_NAME'] ?>">reload page</a>
<!-- I've added reloading link, because
     refreshing POST queries is not good idea -->
</p>
<?php
}
?>
<h1>Image gallery</h1>
<h2>Uploaded images:</h2>
<!-- This form is used for image deletion -->

<?php
$result = mysqli_query($con,"SELECT id, image_time, title, data FROM {$table} ORDER BY id DESC");
if (mysqli_num_rows($result) == 0) // table is empty
    echo '<ul><li>No images loaded</li>';
else
{
    echo '<div class="row">';
    while(list($id, $image_time, $title,$data) = mysqli_fetch_row($result))
    {
        // outputing list
	    echo '<div class="column">';
    echo '<br><img width="300px" border="3px" height="274px" src="data:image/jpeg;base64,'.base64_encode($data).'">';
	    echo "<div class='desc'><a href='https://demo.mistonline.in/gallery_mistonline_blob_demo/?show=".$id."'>".$title."</a></div>";
	    //echo "<br><small>{$image_time}</small></li>";
	    echo "</div>";
    }

    echo '</div>';

}
?>

</form>
</body>
</html>

Other gallery scripts that can be configured with above PHP/MySQL image gallery

Image Gallery Using jQuery

Create Thumbnail Using PHP

Replacing images using jQuery

Before using following example create sql-table (execute CREATE TABLE query above) and make sure to change variables ($db_host, $db_user, $db_pwd, $database, $table) to your MySQL / database settings.

Demo