sorry for asking here but I can't seem to get my head around what I need to do to complete this.
I have a gallery that is pulled from the database and i'd like it so every division of 4 it adds a new row.
Here is my website: https://creativehedgehog.co.uk/gallery
i.e
<div class="row">
col3
col3
col3
col3
</div>
Is this correct? Here is my code
<div class="gallery-container">
<div class="gallery cf">
#php
$i=0;
#endphp
#foreach($galleries as $gallery)
#if($i % 4 == 0)
{{$i}}
<div class="row">
#endif
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#if($i % 4 == 0)
{{$i}}
</div>
#endif
#php
$i++;
#endphp
#endforeach
</div>
</div>
Use array_chunk function. array_chunk
<div class="gallery-container">
<div class="gallery cf">
#foreach(array_chunk($galleries,4,true) as $chank)
<div class="row">
#foreach($chank as $gallery)
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#endforeach
</div>
#endforeach;
</div>
</div>
You are adding a row element every fourth iteration, not placing 4 iteration into each row.
Look below:
<div class="gallery-container">
<div class="gallery cf">
#php
$i=0;
#endphp
#foreach($galleries as $gallery)
#if($i % 4 == 0)
#if($i != 0)
</div>
#endif
{{$i}}
<div class="row">
#endif
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#php
$i++;
#endphp
#endforeach
</div><!-- last row end -->
</div>
</div>
Try this and let the bootstrap flexbox do their job
<div class="gallery-container">
<div class="gallery cf">
<div class="container-fluid">
<div class="row">
#foreach($galleries as $gallery)
<div class="col-md-3">
<a href="{{$gallery->link}}" data-lightbox="image-1" data-title="{{$gallery->title}}">
<img src="{{$gallery->link}}" alt="{{$gallery->title}}">
</a>
</div>
#endforeach
</div>
</div>
</div>
</div>
Related
i would have the class "opacity" inserted only at the first "carousel-cell".
For the rest in the loop, they should not be there.
<div class="main-carousel">
#foreach($projects as $p)
#if($p->getMedia('teaser')->first() ?? "")
<div class="carousel-cell">
<div class="row">
<div id="project-info" class="col-lg-3 text-md-right pr-md-5 project-info">
<div class="project opacity">
<h2 class="project-title mb-0">{{$p->name}}</h2>
<h3 class="project-category">Foto / Video Produktion</h3>
</div>
</div>
<div class="col-lg-9 project-img opacity">
<a href="{{url('projects')}}/{{$p->slug}}">
<div class="start-teaser">
<img src="{{asset('storage')}}/{{$p->getMedia('teaser')->first()->id}}/{{$p->getMedia('teaser')->first()->file_name}}" alt="Land Rover">
</div>
</a>
</div>
</div>
</div>
#endif
#endforeach
</div>
You could use the $loop->first variable to add a class only on the first iteration of the loop.
Like this: <div class="carousel-cell {{ $loop->first ? 'opacity' : '' }}">
See more here:
https://laravel.com/docs/9.x/blade#the-loop-variable
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
Trying to loop through my database and to post a bootstrap card for each "board member" in my database. However, with my current code, they post on top of each other, and I need them in rows. Here is my current code.
<div class="row">
<div class="col-sm-4 my-4">
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
</div>
</div>
You need to loop the .col part:
#if(count($boardMembers) > 0)
#foreach($boardMembers as $boardMember)
<div class="col-sm-4 my-4">
<div class="card">
<img class="card-img-top" src="img/user1.jpg" alt="">
<div class="card-body">
<h2 class="card-title">{{$boardMember->name}}</h2>
<p class="card-text">{!!$boardMember->description!!}</p>
</div>
</div>
</div>
#endforeach
#else
<p>No Members Found</p>
#endif
This will create multiple .cols with .cards but make sure you style the <p>No Members Found</p> or you can make it inside a .col too
I'm using the materialisecss CSS framework within my Laravel Views, and I'm trying to set my layout such that:
if there is only one post available, it is displayed 6 columns wide,
offset by 3
if there are only 2 posts, they are both displayed 6 columns wide side by side
if there are more than 2 posts they are displayed 4 columns wide.
I have the code below as part of my view, but it doesn't like it, and returns the following:
Parse error: syntax error, unexpected 'elseif' (T_ELSEIF) (View: /home/testuser/sites/lsapp/resources/views/posts/index.blade.php)
#if(count($posts) > 0)
<div class="row">
#if (count($posts) === 1)
#foreach($posts as $post)
<div class="col s12 m6 offset-m3">
#elseif (count($posts) === 2)
#foreach($posts as $post)
<div class="col s12 m6">
#else
#foreach($posts as $post)
<div class="col s12 m4">
#endif
<a href="posts/{{$post->id}}">
<div class="card hoverable">
<div class="card-image">
<img src="http://via.placeholder.com/460x230">
<span class="card-title">{{$post->title}}</span>
<a class="btn-floating halfway-fab waves-effect waves-light red hover"><i class="material-icons">remove_red_eye</i></a>
</div>
<div class="card-content">
<p>
Created by {{$post->user->name}}<br>
<small>on {{$post->created_at->toDateString()}} at {{$post->created_at->toTimeString()}}</small>
</p>
</div>
</div>
</a>
</div>
#endforeach
</div>
#else
<div class="row">
<div class="col s12">
<div class="card">
<p>No posts found</p>
</div>
</div>
</div>
#endif
I think it has something to do with the foreach, but I'm not certain.
Note: There is probably a far better way of doing this, but I'm currently learning Laravel after teaching myself PHP, so it's not the end of the world.
You're getting the problem because you're not closing off the directives properly. Try something like this.
#if(count($posts) > 0)
<div class="row">
#foreach($posts as $post)
<div class="#if (count($posts) === 1) col s12 m6 offset-m3 #elseif (count($posts) === 2) col s12 m6 #else col s12 m4 #endif">
<a href="posts/{{$post->id}}">
<div class="card hoverable">
<div class="card-image">
<img src="http://via.placeholder.com/460x230">
<span class="card-title">{{$post->title}}</span>
<a class="btn-floating halfway-fab waves-effect waves-light red hover"><i
class="material-icons">remove_red_eye</i></a>
</div>
<div class="card-content">
<p>
Created by {{$post->user->name}}<br>
<small>on {{$post->created_at->toDateString()}}
at {{$post->created_at->toTimeString()}}</small>
</p>
</div>
</div>
</a>
</div>
#endforeach
</div>
#else
<div class="row">
<div class="col s12">
<div class="card">
<p>No posts found</p>
</div>
</div>
</div>
#endif
You need to #endforeach
#foreach($posts as $post)
....
#endforeach
The error is saying that there is an unexpected #elseif because the parser expects you to end the foreach before.
you can try this:
#if (count($posts) === 1)
<?php $class = 'col s12 m6 offset-m3'; ?>
#elseif (count($posts) === 2)
<?php $class = 'col s12 m6'; ?>
#else
<?php $class = 'col s12 m4'; ?>
#endif
#foreach($posts as $post)
<div class="{{ $class }}">
//rest of code...
#endforeach
Yes every directive must be closed properly. Meaning you should have the closing tag #endforeach after every #foreach statement.
If it's difficult. You can try
#php #endphp
here i'm trying to click on any tabs to retrieve it's own data i did it well and it really retrieves the data of one raw only ?! any help?
<div class="col-lg-12">
<div class="tabs-container">
<ul class="nav nav-tabs">
#foreach($departments as $department)
<li class=""><a data-toggle="tab" href="#tab-{{ $department->id }}" aria-expanded="false">{{ $department->name }}</a></li>
#endforeach
</ul>
<div class="tab-content">
#foreach($works as $work)
<div id="tab-{{ $work->department_id }}" class="tab-pane">
<div class="panel-body">
<div class="row employees">
<div class="col-md-3">
<div class="thumbnail">
<div class="image view view-first"> <img class="img-responsive" src="" name="imaged" alt="image"> </div>
<div class="caption">
<h4>{{ $work->address }} </h4>
<p>{{ $work->body }}</p>
</div>
</div>
<a class="btn btn-primary" href="edit-portfolio.html"> تعديل</a>
<button class="btn btn-danger demo4"> حذف
</button>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<!-- -->
</div>
i don't need to make it ajax if anyone have a good reason for why it give me only one record for each department?
The reason why you get one record for department is that your loop create one tab panel per work, for example if you have 2 works (1,2) belongs to one department (1) the result would be 2 tabs with the same id set to 1:
departments:
id
-----
1
works:
id department_id
---------------------
1 1
2 1
Html result:
<div id="tab-1" class="tab-pane">
...
</div>
<div id="tab-1" class="tab-pane">
...
</div>
note that both tabs have the same id tab-1.
Solution
group works by department_id, something like this:
$works = Work::all()->groupBy('department_id');
and then in your view:
<div class="tab-content">
#foreach($works as $department_id => $department_works)
<div id="tab-{{ $department_id }}" class="tab-pane">
<div class="panel-body">
<div class="row employees">
#foreach($department_works as $work)
<div class="col-md-3">
<div class="thumbnail">
<div class="image view view-first"> <img class="img-responsive" src="" name="imaged" alt="image"> </div>
<div class="caption">
<h4>{{ $work->address }} </h4>
<p>{{ $work->body }}</p>
</div>
</div>
<a class="btn btn-primary" href="edit-portfolio.html"> تعديل</a>
<button class="btn btn-danger demo4"> حذف </button>
</div>
#endforeach
</div>
</div>
</div>
#endforeach
</div>
Hope this helps