I want to make this page dynamic.
<div class="row">
<div class="col-md-12 placement-box wow fadeInUp" data-wow-delay=".4s" data-wow-duration="2s" id="#" style="visibility: visible; animation-duration: 2s; animation-delay: 0.4s; animation-name: fadeInUp; display: block;">
<div class="placement-box-content">
<div class="row align-items-center">
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/07.png" alt="">
<h2 class="placement-title">ISMAIL.KM</h2>
<h4 class="placement-subtitle">PONNAMPETT, KODAGU<br>
NOW @ BUR DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/08.png" alt="">
<h2 class="placement-title">MOHAMMED ASHIQUE.CH</h2>
<h4 class="placement-subtitle">KUDLU ,KASARGOD<br>
NOW @ DEIRA,DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/09.png" alt="">
<h2 class="placement-title">ABDUL RIYAZ.N.A</h2>
<h4 class="placement-subtitle">SHORNUR<br>
NOW @ SHARJA, UAE</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/10.png" alt="">
<h2 class="placement-title">SUFAID.CK</h2>
<h4 class="placement-subtitle">ATHAVANAD, MALAPPURAM<br>
NOW @ DEIRA, DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/11.png" alt="">
<h2 class="placement-title">FAVASUDHEEN. ET</h2>
<h4 class="placement-subtitle">ORAVAMPURAM,PANDIKKAD<br>
NOW @ SHARJA, UAE</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/12.png" alt="">
<h2 class="placement-title">THASHREEF</h2>
<h4 class="placement-subtitle">KANNUR<br>
NOW @ SHARJAH</h4>
</div>
</div>
</div>
</div>
<div class="col-md-12 placement-box wow fadeInUp" data-wow-delay=".4s" data-wow-duration="2s" id="#" style="visibility: visible; animation-duration: 2s; animation-delay: 0.4s; animation-name: fadeInUp; display: block;">
<div class="placement-box-content">
<div class="row align-items-center">
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/07.png" alt="">
<h2 class="placement-title">ISMAIL.KM</h2>
<h4 class="placement-subtitle">PONNAMPETT, KODAGU<br>
NOW @ BUR DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/08.png" alt="">
<h2 class="placement-title">MOHAMMED ASHIQUE.CH</h2>
<h4 class="placement-subtitle">KUDLU ,KASARGOD<br>
NOW @ DEIRA,DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/09.png" alt="">
<h2 class="placement-title">ABDUL RIYAZ.N.A</h2>
<h4 class="placement-subtitle">SHORNUR<br>
NOW @ SHARJA, UAE</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/10.png" alt="">
<h2 class="placement-title">SUFAID.CK</h2>
<h4 class="placement-subtitle">ATHAVANAD, MALAPPURAM<br>
NOW @ DEIRA, DUBAI</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/11.png" alt="">
<h2 class="placement-title">FAVASUDHEEN. ET</h2>
<h4 class="placement-subtitle">ORAVAMPURAM,PANDIKKAD<br>
NOW @ SHARJA, UAE</h4>
</div>
<div class="col-md-2 p-0 text-center">
<img src="http://britco.d5n.in/site/images/placement/12.png" alt="">
<h2 class="placement-title">THASHREEF</h2>
<h4 class="placement-subtitle">KANNUR<br>
NOW @ SHARJAH</h4>
</div>
</div>
</div>
</div>
<div class="col-md-12 blog-load-more wow bounceInDown" data-wow-delay=".6s">
<div class="banner-scroll"><a href="javascript:void(0)"><span></span><span></span><span></span></a></div>
<a href="javascript:void(0)" id="loadMore"> <button>Load More</button> </a>
</div>
</div>
As you can see every row should only have 6 elements (student placement details). After every 6 iteration I want this to appear along with the previous ones closing tags.
<div class="col-md-12 placement-box wow fadeInUp" data-wow-delay=".4s" data-wow-duration="2s" id="#" style="visibility: visible; animation-duration: 2s; animation-delay: 0.4s; animation-name: fadeInUp; display: block;">
<div class="placement-box-content">
<div class="row align-items-center">
Now I want this to happen whenever the placement year changes too. so that placement details of a new year will come in a new row. Thus I wrote this code..
<div class="row">
@foreach($placements as $placement)
@isset($placement->photo)
@isset(json_decode($placement->photo,true)[0])
@if($count%6 == 0 || $year != $placement->date->format('Y'))
<div class="col-md-12 placement-box wow fadeInUp" data-wow-delay=".4s" data-wow-duration="2s" id="#">
<div class="placement-box-content">
<div class="row align-items-center">
<div class="col-lg-12 col-md-12 pb-4">
<h5 class="wow slideInUp" data-wow-delay=".3s" style="margin-top: 10px !important;">Placement : </h5>
</div>
@endif
<div class="col-md-2 p-0 text-center">
<img src="" alt="">
<h2 class="placement-title"></h2>
<h4 class="placement-subtitle"><br>
NOW @ <br>
</h4>
</div>
<?php
if ($year != $placement->date->format('Y')){
$count = 0;
$year = $placement->date->format('Y');
}
else{
$year = $placement->date->format('Y');
}
$count++; ?>
<?php if($count%6 == 0){
echo'</div>
</div>
</div>';}
?>
@endisset
@endisset
@endforeach
</div>
</div>
</div>
<div class="col-md-12 blog-load-more wow bounceInDown" data-wow-delay=".6s">
<div class="banner-scroll"><a href="javascript:void(0)"><span></span><span></span><span></span></a></div>
<a href="javascript:void(0)" id="loadMore"> <button>Load More</button> </a>
</div>
</div>
</section>
The $year and $count variables are initiated at the PlacementController like this..
public function placement()
{
$placements = Placement::orderBy('date','desc')->get();
$count = 0;
$year = 2020;
return view('site.placement')->with(compact('placements', 'count', 'year'));
}
Now the problem is enything written after the endforeach and before the closing tag </section> is not showing up on the webpage which include the view more button ..
<div class="col-md-12 blog-load-more wow bounceInDown" data-wow-delay=".6s">
<div class="banner-scroll"><a href="javascript:void(0)"><span></span><span></span><span></span></a></div>
<a href="javascript:void(0)" id="loadMore"> <button>Load More</button> </a>
</div>
I suppose the loop is not ending or I dont know. When i remove the
$year != $placement->date->format('Y') from the first @if condition it works fine but the layout is messed up. Can anybody help please.
Aucun commentaire:
Enregistrer un commentaire