Use PHP and MySQL to add images to a gallery

Question

I'm trying to create a back-end to my photo gallery so it will make it easier for me to upload images to the gallery.

The Gallery consists of a thumbnail image, a one line description and the thumbnail is hooked up to a fancy box. Pretty basic. (The thumbnail and fancy box image are using the same image.)

I'm just starting to learn the basics of PHP and MySQL and would like to know how I can take this code: (FYI this is only part of the gallery.)

<li data-id="id-12" data-type="treeremoval">
<div class="column grid_3">
<a class="fancybox" rel="treeremoval" href="images/gallery/1.jpg" title="Tree Removal Lake of  the Ozarks">
<img src="images/gallery/1.jpg" alt="Tree Removal Lake of the Ozarks" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Removal </h5>
</div>  
</li>



<li data-id="id-11" data-type="treetrimming">
<div class="column grid_3">
<a class="fancybox" rel="treetrimming" href="images/gallery/2.jpg" title="Osage Beach Tree Trimming">
<img src="images/gallery/2.jpg" alt="Osage Beach Tree Trimming" class="max-img-border"></a>
<h5>Lake of the Ozarks Tree Trimming</h5>
</div>  
</li>

and create an admin system that I can upload images to the gallery without having to manually go in and adjust the code every time a client sends me an image.

Pretty much, I want to create a form where I can set the parameters and uploaded the image(s) to the gallery page.

Using the above code how can I add more images to the list?

I guess what I'm asking is how to setup a database and table and add the appropriate php syntax to the html to get the results I'm looking for?

I understand how to create a form to upload the images into a ftp directory. I'm just lost on setting up the database and tables to retrieve the images and text and place them in the gallery

Would I set the database up like this? (FYI I have no clue as to what I'm doing at this point.)

Database name: maingallery

Table: data-id: id ascending

( The data-id and data-type are very important as the gallery is connected to a filtering system. I would want the data-id to be auto generated and add the newest image to the top of the gallery. )

data-type: treetrimming

data-type: treeremoval

rel: gallery1

rel: gallery2

image: ...???

title: Tree Removal Lake of the Ozarks

title: Osage Beach Tree Trimming

Then for the h5 tag

caption: Lake of the Ozarks Tree Removal

caption: Lake of the Ozarks Tree Trimming

For the images I'm using a max-img-border class because the site is responsive and I have all the images sized to 720px x 482px

The css looks like this:

.max-img-border { 
 width:100%;
 height:auto;
 border:solid 2px #FFFFFF;
 margin-bottom:10px;
 }

By using this method I have it set up so I only have to deal with one image for the thumbnail and fancybox image.

I hope what I'm asking makes sense.

I know what I'm asking for is probably a lot to explain, but any help would be greatly appreciated. Even some links to a good tutorial might help. I searched Google for a day or two, but can't really find exactly what I'm looking for.

Also If you look at the gallery and shuffle through the categories there is a large jump in the transition. I'm currently working on fixing this.

If you need anymore info from me please let me know and I will be more than willing to provide it.

Thank you!

Answer 1

You'll need a MySQL table containing the information about the image, and the file name of the image:

CREATE TABLE images (
    id int(3) not null auto_increment,
    data_type varchar(128) not null,
    title varchar(256) not null,
    file_name varchar(64) not null,
    primary key(id)
)

And you're going to have to make an image upload form, something like this:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
    Data type: <input type="text" name="dataType"><br>
    Title: <input type="text" name="title"><br>
    Image to upload: <input type="file" name="image"><br>
    <input type="submit" value="Upload">
</form>

And a PHP script to handle the uploaded files and add database entries:

uploader.php

<?php
$dataType = mysql_real_escape_string($_POST["dataType"]);
$title = mysql_real_escape_string($_POST["title"]);
$fileName = basename($_FILES["image"]["name"]);
$target_path = "images/gallery/".$fileName);
if (file_exists($target_path))
{
    echo "An image with that file name already exists.";
}
elseif (move_uploaded_file($_FILES["image"]["tmp_name"], $target_path))
{
    // The file is in the images/gallery folder. Insert record into database by
    // executing the following query:
    // INSERT INTO images
    // (data_type, title, file_name) VALUES('$dataType','$title','$fileName')
    echo "The image was successfully uploaded and added to the gallery :)";
}
else
{
    echo "There was an error uploading the file, please try again!";
}
?>

Note that this script is not safe, it would allow people to upload for example .php files to the server. Something like this will be necessary:

$allowed_extensions = array("jpg","jpeg","png","gif");
$extension = pathinfo($fileName, PATHINFO_EXTENSION);
if (!in_array($extension,$allowed_extensions))
{
    die("Only these file types are allowed: jpg, png, gif");
}

Now on the gallery page you'll want to loop through the images in the database.

<?php
$images = mysql_query("SELECT * FROM images");
while ($image=mysql_fetch_assoc($images))
{
    ?>
    <li data-id="id-<?=$image["id"] ?>" data-type="<?=$image["data_type"] ?>">
    <div class="column grid_3">
    <a class="fancybox" rel="<?=$image["data_type"] ?>" href="images/gallery/<?=$image["file_name"] ?>" title="<?=$image["title"] ?>">
    <img src="images/gallery/<?=$image["file_name"] ?>" alt="<?=$image["title"] ?>" class="max-img-border"></a>
    <h5><?=$image["title"] ?></h5>
    </div>  
    </li>
    <?php
}
?>

Please note that the upload form will have to be protected, and only available to the right people. You don't want spammers to upload random files onto your server.