Display images from a folder, present as gallery with each image having a text field and submit chosen ones

#1

Hi there,

I working on a project, getting back into PHP again…

Well, the overall aim from a user perspective is to view a page with images (include pagination if there’s quite a few) and have the ability to select which ones they like (using a checkbox) and if they want to supply a bit of text regarding that image (like a textfield sitting underneath the image) too they can. Once they’ve gone through, checked the ones they want, they can submit it and it’s sent to an email address…

At the moment the code I’ve got pulls the images from the folder via array but im having trouble making each image/text unique so it only sends the ones that have been checked.

<?php
//When the form is submitted
$submit = $_POST['submit'];

//capture the data from the form
$name_of_file = $_POST['image'];
$page = $_POST['page'];
$check_image = $_POST['check_image'];

//check if the form is submitted
if(isset($submit)) {
    //once the form has been submitted identy the ones (images) that have been checked and ready to send
    if(isset($check_image)) {

    $name_of_file = $_POST['image'];
    $page = $_POST['page'];
    foreach ($name_of_file as $image_name){
     echo '<b>'.$image_name.'</b>' . "\n";
    }
    foreach ($page as $page_selected){
        echo 'and you want this to be on page '.$page_selected.'<br />' . "\n";
       }

}else {
    echo "no image has been selected";
}
}

;?>

<form method="post" action="index.php">
<ul>
<?php
        //pulls images
        $dirname = "img/";
        $images = scandir($dirname);
        shuffle($images);
        $ignore = Array(".", "..",'.DS_Store');
        foreach($images as $curimg){
            if(!in_array($curimg, $ignore)) {
                echo "<li class='frame'>". "\n";
                echo "<input type='checkbox' name='check_image' value='unchecked' />". "\n";
                echo "<a href='".$dirname.$curimg."'><img src='".$dirname.$curimg."' alt='' /></a>". "\n";
                echo '<input type="text" name="page" value="" />'. "\n";
                echo '<input type="text" name="image[]" value="'.$curimg.'" />'. "\n";
                echo '</li>'. "\n";
            }
        }                 
;?>
</ul>
<input type="submit" name="submit" />
</form>

Generally, I’m rubbish at understanding arrays, as i think this is how to sort it. Any advice would be greatly appreciated.

#2

I think the next thing you need to do is to turn the checkbox and the text entry for each image into arrays, the same way that you have done for the image input field.

You might find it useful in the long run to handle the images via a database, so you can use an id rather than the path/filename combination to access them. If you write an upload page so that there’s a database row for each image, that can contain a unique id and a reference to the image, along with the text if there is some. That way, when you display the images, you can use the unique id to refer to the image. In my head that seems easier, but when I write it down, maybe not so much.

#3

Yeah, I totally agree with your feed back @droopshoot, as that is the plan really. The hurdle for me is writing the actual code; having them all in arrays just confuses me.

Again, yeah uploading the files and then putting them into the database is the plan but at the moment i’m trying the break down the tasks into manageable chunks…

Do you have any pointers of how to write the code; putting the checkbox & text entry into the code?

Thanks
Darren

#4

The first thing I’d do in your processing code, apart from changing

if(isset($submit)) {

to the more generally-accepted

if ($_SERVER['REQUEST_METHOD'] == "POST") {

is to add these two lines:

var_dump($_POST);
exit();

just inside the above if() clause, and have a look at how the information is coming into your processing code. That way you can get an idea of how you need to access the information.

For example, you use foreach() in a couple of places in that form processing code, but one of the fields you’re using isn’t an array, and one of them is. var_dump() will highlight that kind of thing, which is a html typo presumably. Your loop should also check that the checkbox has been ticked for each image - at the moment, you just check it once. I would think that would need to be an array, too, unless I’m reading the code wrongly.