Once multiple images have been uploaded for an Entity in the database we need a simple way to display them without completely rebuilding the user interface. A bootstrap carousel is an ideal way to display multiple images.
For the purposes of this example we will imagine a view which allows the user to simple view a member's details.
The simplest way to do this is to use the Edit view and adapt it slightly to show the pictures for each member.
Edit the app/controllers/MemberController.php file and add the following line to the editAction() function.
$this->view->memberImages = $member->getMemberimage();
The getMemberimage() function is not an actual function of the Member model. This is a magic function that is dependent on the "has many" alias which is set in the initialize() function of the Member.php model file. The alias in the intialize() function should be been generated by the phalcon model member --force command from step 1. Given the alias "Memberimage" the magic function getMemberimage() will return an array of Memberimage objects which are associated with that member based on the primary key - foreign key relationship between the entities.
The following line is the alias which should be already present.
$this->hasMany('id', 'tennisClub\Memberimage', 'memberid', ['alias' => 'Memberimage']);
Now that we have modified the editAction() function in the controller to include Memberimages on the view we can go ahead and modify the view to display those Memberimages in a carousel.
Edit the file app/views/member/edit.phtml and include the following code at the bottom of the view just below the DateOfBirth form group.
<div class="form-group"> <label class="col-sm-2 control-label">Photos</label> <div class="col-sm-10" style="padding-top: 0px;padding-bottom:12px; padding-left:5px; padding-right:2px;"> <div id="thisCarousel" class="carousel slide" data-ride="carousel"> <!-- Images --> <div class="carousel-inner" role="listbox"> <?php $i=0;foreach ($memberImages as $memberImage) : ?> <div style="padding-bottom:20px" class="item <?php if($i++==0) echo 'active'?>"> <img src="data:image/jpeg;base64,<?php echo $memberImage->getImageFile()?>" style="width:45%;height:350px;" class="img-responsive center-block"> <div class="carousel-caption" style="padding:0;top:auto;bottom:0;color:black"> <h2><?php echo $memberImage->getDescription()?></h2> </div> </div> <?php endforeach; ?> </div> <!--controls --> <a class="left carousel-control" href="#thisCarousel" data-slide="prev" style="background-image:none;color: black;"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#thisCarousel" data-slide="next" style="background-image:none;color: black;"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </div>
The image carousel has been styled to appear as simple as possible with no background and padding has been adjusted so that it will appear in line the the 2, 10 column formation of standard phalcon bootstrap views. The view will now appear as below.