How to get a PHP loop to run via a variable? - php

Question

(This has now been resolved - thanks #ChelseaStats)
I have built a web page in PHP. users log in and upload photos and stories, and the page displays the stories and photos immediately.
The problem is that the photos that the MySQL query and PHP return from the database are being displayed all over the place. I have printed them out in an id’d div but the CSS is having no control over their positioning.
Currently the query is like this:
$q1 = "SELECT * from images ORDER BY date ASC";
and they are displayed like this...
row1 = #mysqli_query($dbc, $q1);
echo '<div id = "pictures">';
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo '
<img style = "border: 1px solid black; padding: 10px;" height = "80" width = "80" src = "data:image;base64,'.$fix1['image'].'"><br>'.$fix1['image_id'].'
';}
echo '</div id = "pictures">';
What I would like to do is store all the 'while loop' programming in a variable, then print that variable out elsewhere on the HTML page away from php script so that when the database query is run, I can use the results to fill/initialize the variable (e.g. $displayPics) which will then be printed out on the html page where I want it to appear.
I realise this may be impossible and I am open to suggestions...
...or I might be willing to run a query with a limit of 20 giving results in descending date order and then assigning ‘loop-free’ PHP code to a variable which I can then print out on the page elsewhere.
Code could look something like this:
row1 = #mysqli_query($dbc, $q1);
$fix1 = mysqli_fetch_array($row1);
$displayPics = '
<img style = "border: 1px solid black; padding: 10px;" height = "40" width = "40" src = "data:image;base64,\'.$row1[$fix1[\'image\']].\'"><br>\'.$row1[$fix1[\'image\']].\'
';
(Above code is a shot at how I imagine it will look). (I think the img src code and html has been filtered out by the forum possibly).
But maybe this code will be repeated 20x in the variable with row number changing for each subsequent repetition perhaps?
(I basically want better control over the positioning of the pics coming back from the database).

Answer 1

in a foreach you can assign to a variable like this
$bob = ''; // set it
foreach($row as $image) {
// append to it
$bob .= '<div id=""><img src="" /></div>'.PHP_EOL;
}
print $bob;
similar would work for you.

Answer 2

if you use Bootstrap- you can assign a display class as it is rendered. The following will display each image as follows (4 across on a medium to large viewport, 3 across on a small viewport, and two across on a mobile sized viewport). Also note the use of figcaption to provide the caption on each image.
row1 = #mysqli_query($dbc, $q1);
while ( $fix1 = mysqli_fetch_array($row1) ) {
echo "<div class='col-md-3 col-sm-4 col-xs-6'>
<figure>
<img style = 'border: 1px solid black; padding: 10px;' height = '80' width = '80' src = 'data:image;base64,".$fix1['image']."'/>
<figcaption>".$fix1['image_id']."</figcaption>
</figure>
</div>
";}

Answer 3

Simply write a function that returns all of the rows into an array of assoc arrays and loop through them when you need them elsewhere in the code and use conditional tests on the rows to have better control over where they go!
function getImages(){
$imgs = array();
while(($next = mysqli_fetch_assoc(...)){
array_push($imgs, $next);
}
return $imgs; //array of assoc arrays
}