Laravel: blade foreach looping bootstrap columns - php

I have a foreach loop and inside that contains html with bootstrap columns.
#foreach($address as $add)
<div class="col-md-6">
Some data
</div>
#endforeach
However, bootstrap requires the row div before creating columns, placing that straight in to the foreach loop would create a row div for each col-md-6. I want to know how I can throw in the row div, skip the next loop throwing in only the closing div tag. And then repeat that process.
Example output where the loops 4 times:
<div class="row">
<div class="col-md-6">
Some data
</div>
<div class="col-md-6">
Some data
</div>
</div>
<div class="row">
<div class="col-md-6">
Some data
</div>
<div class="col-md-6">
Some data
</div>
</div>

As an alternative to Alexey Mezenin's answer you could use array_chunk instead. http://php.net/manual/en/function.array-chunk.php
#foreach(array_chunk($address, 2) as $chunk)
<div class="row">
#foreach($chunk as $add)
<div class="col-md-6">
Some data
</div>
#endforeach
</div>
#endforeach
I personally find the the above a little more readable.
Alternatively, if $address is a collection you could do $address->chunk(2) instead of array_chunk($address, 2).
If you want to change the amount of columns you have you would simply need to change the 2 to be however many columns you want.

You can use Laravel chunk in the blade template.
#foreach($products->chunk(3) as $items)
<div class="row">
#foreach($items as $item)
<div class="col-md-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="{{ 'uploads/'.$item->product_image_url }}" alt="">
</a>
<h3>
{{ $item->product_name }}
</h3>
<p>{{ str_limit($item->product_description, 121) }}</p>
</div>
#endforeach
</div>
#endforeach
Copied from the blogpost.

Use the $loop variable:
<div class="row">
#foreach($address as $add)
<div class="col-md-6">
Some data
</div>
#if ($loop->iteration % 2 == 0)
</div>
<div class="row">
#endif
#endforeach
</div>

Related

expand / toggle div with display none from foreach with $ id

I have this:
#foreach($portfolios as $portfolio)
<div id="item-portfolio-expand{{$portfolio->id}}" class="item-portfolio-expand expand">
<div class="container">
<div class="row">
<div class="col-md-8">
col-md-8
</div>
<div class="col-md-4">
{{ __('Name')}}: {{ $portfolio->name }}
</div>
</div>
</div>
</div>
#endforeach
And this:
#foreach ($portfolios as $portfolio)
<div class="portfolio-item {{ $portfolio->tag }} " data-category="transition">
<img src="{{ $portfolio->image_show }}">
<a href="#item-portfolio-expand{{$portfolio->id}}" data-toggle="collapse" data-target="#item-portfolio-expand{{$portfolio->id}}" data-parent="#item-portfolio-expand{{$portfolio->id}}">
<div class="portfolio-item-overlay">
<p class="name-item-overlay">{{ $portfolio->name }}</p>
</div>
</a>
</div>
#endforeach
And when I press the in the first foreach, I want to toggle the second foreach at <div id = "item-portfolio-expand {{$ portfolio-> id}}" class = "item- portfolio-expand expand "> I just don't succeed at anything, I use bootstrap and jquery in the project. .item-portfolio-expand has display: none;
And at the same time when one is open and another is selected, to close the one already open and to appear the one selected with toggle.

Adding multiple div to a foreach loop - Laravel

I am new to Laravel. I am trying a loop through a multiple div and struck in between. I want to wrap a div with multiple columns in it.
#foreach($products as $product)
<div>
<div class="row">
#foreach($products as $product)
<div class="col-md-4">
{{image}}
</div>
#endforeach
</div>
</div>
#endforeach
It's not printing the expected output. my expected output should be like.
<div>
<div class="row">
<div class="col-md-4">image1</div>
<div class="col-md-4">image2</div>
<div class="col-md-4">image3</div>
</div>
</div>
<div>
<div class="row">
<div class="col-md-4">image4</div>
<div class="col-md-4">image5</div>
<div class="col-md-4">image6</div>
</div>
</div>
How can I print div properly with the above formate?
Try using Collection Chunks:
#foreach($products->chunk(3) as $chunk)
<div class="row">
#foreach($chunk as $product)
<div class="col-md-4">
YOUR IMAGE HERE
</div>
#endforeach
</div>
#endforeach
Try this?
<div class="row">
#for($i = 1; $i <= len($products); $i++)
<div class="col-md-4">
Title: {{$products[$i-1]->title }}
</div>
#if($i%3===0)
</div> <div class="row">
#endif
#endfor
</div>
#for($i = 0; $i < count($products); $i++)
<div>
<div class="row">
#foreach($products as $product)
<div class="col-md-4">
{{image}}
</div>
#endforeach
</div>
</div>
#endfor

bootstrap 4 grid row and php #foreach

I am trying to switch over a site to Bootstrap 4 from Bootstrap3 and having an issue with the Grid "row" option when nesting with looping through a PHP Laravel #foreach loop.
The code that I have tried in different ways looks like:
<div class="row">
<div class="col-12">
<div class="row">
#foreach($sofas as $sofa)
#if(isset($sofa['Sub']))
<a href="{{ Request::url() }}/{{ $sofa['Style'] }}">
<div class="col-12 col-sm-4 col-md-3" style="padding:0 5px 0 5px;">
<div class="product_tile">
<div class="product_tile_style">{{ $sofa['StyleName'] }}</div>
<div class="product_tile_frame">Frame {{ $sofa['Style'] }}</div>
<div class="product_tile_thumb">
<img width="200" height="140" src="/imagelib/bigthumbs/{{ $sofa['url'] }} " alt="">
</div>
</div>
</div>
</a>
#endif
#endforeach
</div>
</div>
The expected outcome should look like the following:
Example of what it should look like.
And this is the random mess that I am getting where it is shrinking everything and not expanding to the columns.
Example of what I am getting which is wrong.
Any ideas and help would be greatly appreciated.
Thank you all in advance!

Laravel : How to divide a file into multiple files?

How to divide a file into multiple files with laravel or php?
For example:
There is a file demo.blade.php:
<div class="card-block">
<div class="row">
<div class="col-1">fruits</div>
<div class="col-11">
apple,pear,peach
</div>
</div>
</div>
<div class="card-block">
<div class="row">
<div class="col-1">aminals</div>
<div class="col-11">
cat,dog,calf
</div>
</div>
</div>
<div class="card-block">
<div class="row">
<div class="col-1">vehicles</div>
<div class="col-11">
car,bus,motorbike
</div>
</div>
</div>
I want to write some code to divide the demo.blade.php into three files:
fruits.blade.php
aminals.blade.php
vehicles.blade.php
The content is each <div class="card-block"></div>.
How to do it?
Any help would be appreciated.
You can use other blade in your blade file like this :
#include('fruits.blade.php')
#include('aminals.blade.php')
#include('vehicles.blade.php')
But this is not a good idea. Instead you can make a template like this :
<div class="card-block">
<div class="row">
<div class="col-1">{{ $title }}</div>
<div class="col-11">
{{ $content }}
</div>
</div>
</div>
And use it everywhere :
#include('template', ['title' => 'foo', 'content' => 'bar'])
Anyway I don't know your purpose of doing this. And you can explain more to give you more examples.
You can also use Blade Components
//This is the template cardblock.blade.php
<div class="card-block">
<div class="row">
<div class="col-1">{{ $title }}</div>
<div class="col-11">
{{ $slot }}
</div>
</div>
</div>
And you can use it like this
#component('cardblock')
#slot('title')
fruits
#endslot
apple,pear,peach
#endcomponent
#component('cardblock')
#slot('title')
aminals
#endslot
cat,dog,calf
#endcomponent
#component('cardblock')
#slot('title')
vehicles
#endslot
car,bus,motorbike
#endcomponent

Blade Template Layout Structure

I need to create a row for each 3 attachments. Something like
#foreach($email->attachment as $attach)
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
#endforeach
<div class="row">
<div class="col-lg-4">1st attachment</div>
<div class="col-lg-4">2nd attachment</div>
<div class="col-lg-4">3rd attachment</div>
</div>
<div class="row">
<div class="col-lg-4">4th attachment</div>
<div class="col-lg-4">5th attachment</div>
<div class="col-lg-4">6th attachment</div>
</div>
and so on! I had searched for the question but just found This link but It's actually different from my perspective.
Thanks
Use array_chunk - it is designed for this each purpose - so you can cut an array into sub-sizes and loop through each group
#foreach (array_chunk($email->attachment->toArray(), 3, true) as $array)
<div class="row">
#foreach($array as $attachment)
<div class="col-lg-4">{{ $attachment['id'] }}</div>
#endforeach
</div>
#endforeach
And using #Lukasgeiter's comment - you could also do it this way if it is a Laravel Collection
#foreach ($email->attachment->chunk(3) as $array)
<div class="row">
#foreach($array as $attachment)
<div class="col-lg-4">{{ $attachment->id }}</div>
#endforeach
</div>
#endforeach
Try this, it's faster than generate 2 arrays:
<div class="row">
#foreach( $email->attachment as $index => $attach)
<div class="col-lg-4">{{$attach}}</div>
#if( $index+1 === 0)
</div><div class="row">
#endif
#endforeach
</div>

Categories