Display images by id into different sections on page

[glendango]

Hi , On advice i save all my images into one column instead of 3 columns by ID . i could spit out the columns easily but now i have the images all in one column i am having logic issues...     on mysql i save the images under column 'file' . each user has 3 pictures they can save under an ID

 

I am so close , i have been able to select the file by id and loop/see  the 3 pictures all together in  ..  trouble is i cant get them to display in different divs/ fields on an edit page iam doing. 

 

Iam playing around with the '{'  '}'   links to try and get the images to sit in the right place if you wonder what they are doing in the code.. i have had results but it seems to loop my html as well??  

 

As you can see from attachment iam getting the images out,,its the arrangment thats killing me. ( i also know about injestion etc,,iam just working off shocking youtune vids etc at moment.) 

 

 

<legend>The Photo Stuff</legend>

 

<div class="form-group">

<label class="col-md-4 control-label">Photo 1</label> 

 

   <div class="col-md-4 inputGroupContainer">

<div class="input-group">

<span class="input-group-addon" ><i class=" glyphicon glyphicon-camera pink  "></i></span> 

<form id="form1" runat="server" >

 

     <input type='file' id="imgInp1" name="file"  /> 

 

<?php

 

if(isset($_GET['update']))

 

  $id=$_GET['update'];

 

$res=mysqli_query($conn,"SELECT * FROM portal_images where id=$id ");   

 

while($rob= mysqli_fetch_array($res)) {

 //$rob= mysqli_fetch_assoc($res);

 

 

 

//$res= $rob['file'];

 

?>

    <img src="<?php echo 'images/'.$rob['file'];?>"  id="blah1" id="#" alt="Change Image by Clicking Browse " width="247" height="142"  />

 

 

    <?php

 

 

{

 

 ?>

 

 

</div></div></div>

 

  

<div class="form-group">

<label class="col-md-4 control-label">Photo 2</label> 

 

   <div class="col-md-4 inputGroupContainer">

<div class="input-group" >

<span class="input-group-addon"><i class="glyphicon glyphicon-camera pink"></i></span> 

<form id="form2" runat="server"   >

 

     <input name="file2" type='file' id="imgInp2"   />   

 

 

    <img src="<?php echo 'images/'.$rob['file'];?>" id="blah2" id="#" alt="Change Image by Clicking Browse " width="247" height="142"/>

 

 

   <?php

 

 

}}{

 

 ?>

 

</div></div></div>

 

 

 

<div class="form-group">

<label class="col-md-4 control-label">Photo 3</label> 

 

   <div class="col-md-4 inputGroupContainer">

<div class="input-group">

<span class="input-group-addon"><i  class="glyphicon glyphicon-camera pink"></i></span> 

<form id="form3" runat="server"  >

 

      <input type='file' id="imgInp3" name="file3"  />    

 

 

 

    <img src="<?php echo 'images/'.$rob['file'];?>"  id="blah3" id="#" alt="Change Image by Clicking Browse " width="247" height="142"/>

 

<?php

 

  

}

 

 ?>

 

 

</div></div></div>

Edited September 23, 2017 by glendango

[ginerjm]

Please wrap your code in the proper tags. Use 'code' and '/code' wrapped in square brackets.

 

As for your problem. Are you really storing images in a database table? Way off the mark! One doesn't need to do that nor should one do that. Store image files as files themselves. You can rename them if you wish but just keep track of the names in the table, not the images themselves. Way too much overhead and resource usage in reading and writing them.

[mac_gyver]

the code you put inside the while(){...} loop braces would be one instance of the html markup that you want to repeat. if you have a need for a sequential counter, for things like Photo 1, Photo 2, ... and for DOM id's, you would set up a variable before the start of the loop, echo that variable any place you need the value, then increment the variable for the next pass through the loop.

 

next, if you aren't actually using each of the the DOM id's, there's no good reason to have them in your html markup. they are just adding clutter and code that you must maintain.

 

you also need one set of <form ...>  </form> tags around all of the form fields. you are currently producing multiple opening <form ...> tags that aren't doing anything after the first one, since nested forms are invalid markup.

 

you need to use prepared queries when supplying data to an sql query statement. you can research in the php.net documentation or on the web to find out what that means.

 

if there isn't a $_GET['update']/$id value when your code is executed, you should not run any of this code. you need to validate all input data and only use it if it exists and is valid.

 

you should also use an array name for the form field's name, so that you will receive an array of submitted files data that you can simply loop over to process.

Edited September 23, 2017 by mac_gyver

[glendango]

Many thanks for tips.. iam saving images on the image path 'images' handball not in the database.

 

regarding closing tags i have this at end of form..i didnt paste all the script just the part about the pictures.

 

</fieldset>

</form>

</div>

 

should i have /form after every instance?

 

 

 

regarding Get and errros and etc,,this is not a live website, i am trying to get pictures to appear first,, i will sanitize etc when i go live in about 2045 at this rate. 

Edited September 25, 2017 by glendango

[glendango]

i think i need to be saving the image in a different way and then calling it by id and name.  so many youtube videos on 1 image.. i need 3 !

[mac_gyver]

following along with youtube videos isn't going to teach you how to produce a program that does what you want. to do that, you need to plan what result you want, then design, write, test, and debug the code that implements that plan.

 

the task of producing the edit form involves retrieving the existing data (this should be done all at once, before the start of the html document), produce a form that has form fields that correspond to that data, populate the form fields with the existing data, where possible, and in the case of type='file' fields, where this is not possible, display the current image next to the form field.

 

i do have one addition to what has already been posted. if you want to allow a maximum of three images, and since there can be from zero to three rows stored in the portal_images table for any particular id value, you would retrieve and store the portal_images data into a php array variable, using the image position as the array index (you indicated in the previous thread that there is a main image and two sub-images). then loop to produce the type='file' form fields/display the existing images, would need to loop three times, and only display an image if there is one in this php array variable for that position.

 

so, what result are you trying to produce, specific to the type='file'/display existing images, using pseudo code - 

// query for and retrieve the existing data here, storing the results in php variables.
// store the portal_images data in a php array variable, such as - $portal_images_result, with the position, 1,2,3, as the array index value. if the position to specific image mapping matters, your portal_images table needs a position column where you can assign and maintain the position for each set of images (i realize that your original three column design did this, but by storing each image in a separate row, you have a general purpose design that can support any number of images and has simpler code and queries to insert, update, and retrieve the data.)

<form method='post' enctype='multipart/form-data'> // you need one opening form tag before the start of the first form field. i'm going to assume you are submitting the form data to the same page that the form is on, hence, no action='...' attribute in the form tag

other form field types go here...

// at the point of producing the type='file' form fields and displaying existing images -
<?php
// define configuration values
$number_portal_images = 3;
$portal_image_path = "images/";

// loop to produce the type='file' form fields and display existing images
for($x = 1; $x <= $number_portal_images; $x++)
{
    echo "Photo $x: ";
    echo "<input type='file' name='file[$x]'>";
    if(isset($portal_images_result[$x]))
    {
        echo "<img src='$portal_image_path{$portal_images_result[$x]}' alt='Change Image by Clicking Browse' width='247' height='142'>\n";
    }
    else
    {
        echo "there is no saved image for this position\n";
    }
    echo "<br>";
}?>

other form field types, such as a submit button

</form> // you need one closing form tag after the last form field