Injecting images into lines in a foreach loop
I have a set of image file names that are returned in this format.
Here is var_dump () from $ this-> images where filenames are stored
array (size=9)
0 =>
object(stdClass)[8]
public 'filename' => string '1416073696I0QHU.jpg' (length=19)
public 'primary' => string '1' (length=1)
1 =>
object(stdClass)[9]
public 'filename' => string '1416073696cTU23.jpg' (length=19)
public 'primary' => string '0' (length=1)
2 =>
object(stdClass)[10]
public 'filename' => string '1416073696uxsvq.jpg' (length=19)
public 'primary' => string '0' (length=1)
3 =>
object(stdClass)[11]
public 'filename' => string '1416073696uBYgo.jpg' (length=19)
public 'primary' => string '0' (length=1)
4 =>
object(stdClass)[12]
public 'filename' => string '1416073696vLBiH.jpg' (length=19)
public 'primary' => string '0' (length=1)
5 =>
object(stdClass)[13]
public 'filename' => string '1416073696rOiFe.jpg' (length=19)
public 'primary' => string '0' (length=1)
I currently have the code to create the required strings, but I'm not sure how to get the urls of the images inside the generated divs, this is what the code looks like to create the structure
$images = $this->images;
$imagesPerLine = 4;
$arraycount = count($images);
$ammountofrows = ceil($arraycount / $imagesPerLine);
for ($i = 0; $i < $ammountofrows; $i++) {
echo"<div class='row'>
<div class='col-md-3'>1</div>
<div class='col-md-3'>2</div>
<div class='col-md-3'>3</div>
<div class='col-md-3'>4</div>
</div>";
}
In this example we will need two lines because there are 4 images in each line and we have 5 images, this code does it, but how can I get each of the image urls in a div, so the first "filename" from array dump will be instead of 1 here
<div class='col-md-3'>1</div>
and then carry on when the next row is created
Here is the code that is used to generate the output, since I am using the MVC system, here is the model and controller that are used
Model
public function GetImage() {
$sql = "SELECT `filename`, `primary` FROM `user_img` WHERE `user_id` = :user_id";
$query = $this->db->prepare($sql);
$query->execute(array(':user_id' => $_SESSION['user_id']));
$filepath = $query->fetchAll();
return $filepath;
}
controller
function imageupload() {
Auth::handleLogin();
$profile_model = $this->loadModel('profile');
$this->view->images = $profile_model->GetImage();
$this->view->render('profile/imageupload');
}
source to share
There are several ways to attack this problem, using your method, you will need two loops, one of which goes through the lines (as you already indicated) and the other one goes over the images. I try to stay away from nested loops if I can avoid them.
for ($i=0; $i < $amountOfRows; $i++) {
echo "<div class='row'>";
for ($j=$i*4; $j < ($i*4+4); $j++) {
if (!isset($images[$j])) {
break;
}
echo "<div class='col-md-3'>{$images[$j]->filename}</div>";
}
echo "</div>";
}
In the above loop, $images
refers to an array of images.
Another option is to loop directly over the array of images and use modular arithmetic to generate your gallery. Here's one way:
foreach ($images as $key=>$image) {
if (!($key%4)) {
echo "<div class='row'>";
}
echo "<div class='col-md-3'>{$image->filename}</div>";
if (!(($key+1)%4) || (($key+1) == count($images))) {
echo "</div>";
}
}
The above snippet $images
refers to your array containing images.
Note. In the second snippet, I specifically included parentheses for operator precedence.
Note2: I recommend you play around with the code and see if there are any improvements you can make, treat my snippets as starting points and not final solutions.
source to share
Since you already have the object in $this->images
, you can get the image url as:
$this->images->filename;
Also note that you are iterating over $ammountofrows
and to get each property filename
you must iterate through trough $this->images
or access each position in the given array directly, for example:
$this->images[0]->filename; // will return 1416073696I0QHU.jpg
source to share