I am using a blade template and I was wanting to know within my foreach what the best way is for me to have it so that my first .panel-heading has another class added to it and then the second one has another etc
Example:
.red
.blue
.red
.blue
.red
Code:
#foreach ($dealsDB as $deal)
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i>{{ $deal->title }}</h4>
</div>
<div class="panel-body">
<p>{{ $deal->content }}</p>
</div>
</div>
</div>
#endforeach
try this
$k=0;
#foreach ($dealsDB as $deal)
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading #if($k%2==0) red #else blue #endif">
<h4><i class="fa fa-fw fa-gift"></i>{{ $deal->title }}</h4>
</div>
<div class="panel-body">
<p>{{ $deal->content }}</p>
</div>
</div>
</div>
$k++;
#endforeach
You can use #switch inside your #foreach to assign different class on every iteration.
#foreach (...)
<div class="
#switch($loop->iteration)
#case(1)
red
#break
#case(2)
green
#break
#case(3)
blue
#break
#default
yellow
#endswitch
">
#endforeach
In Laravel 5.8+, the $loop->odd or $loop->even variables can be used for this.
Furthermore, in Laravel 8.0 the #class directive was added. This is the perfect use case example for it.
In Laravel 5.3+ there is the $loop->iteration which returns the current loop iteration (starts at 1).
Docs:
https://laravel.com/docs/5.8/blade#the-loop-variable
https://laravel.com/docs/8.x/blade#conditional-classes
The following examples will return the exact same result.
Laravel 8+ version
#foreach ($dealsDB as $deal)
<div class="col-md-4">
<div #class([
'panel panel-default',
'red-class' => $loop->odd,
'blue-class' => $loop->even
])>
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i>{{ $deal->title }}</h4>
</div>
<div class="panel-body">
<p>{{ $deal->content }}</p>
</div>
</div>
</div>
#endforeach
Laravel 5.8+ Version
#foreach ($dealsDB as $deal)
<div class="col-md-4">
<div class="panel panel-default
#if($loop->odd) red-class #else blue-class #endif">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i>{{ $deal->title }}</h4>
</div>
<div class="panel-body">
<p>{{ $deal->content }}</p>
</div>
</div>
</div>
#endforeach
Laravel 5.3+ Version
#foreach ($dealsDB as $deal)
<div class="col-md-4">
<div class="panel panel-default
#if($loop->iteration % 2 == 0) blue-class #else red-class #endif">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i>{{ $deal->title }}</h4>
</div>
<div class="panel-body">
<p>{{ $deal->content }}</p>
</div>
</div>
</div>
#endforeach
Related
I have a strange problem in Blade. I think is something obvious but I'm just stuck at it.
I have a Bootstrap carousel with cards in Larvel Blade view. I'm creating new "carousel-item" (slides) using if in for loop, but I'm facing the problem that it generates one empty slide. I cant figure it out why this is happening.
The following code should generate 2 slides with 4 cards in it. Unfortunately it creates 3 slides the last of them empty.
This is my code:
<div id="carousel{!! $type !!}" class="carousel slide" data-ride="carousel" data-touch="true">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row justify-content-center latest__properties_row">
#for($i=0;$i<=7;$i++)
#if(isset($latest[$type][$i]))
<div class="col-md-3 mb-3 latest__properties">
<div class="card">
#if(isset($latest[$type][$i]['photos']))
#if(isset($latest[$type][$i]['photos'][0]))
<a href="/properties/{!! $latest[$type][$i]['slug'] !!}"><img
class="img-fluid latest__properties__photo"
alt="{!! $latest[$type][$i]['title'] !!}"
src="/images/properties/{!! $latest[$type][$i]['photos'][0]['url'] !!}"></a>
#endif
#endif
<div class="card-body">
<div class="title">
<a href="/properties/{!! $latest[$type][$i]['slug'] !!}"><h4
class="card-title">{!! $latest[$type][$i]['title'] !!}</h4>
</a>
</div>
<!-- Slide like buttom -->
<button class="slide__like-btn">
<i class="far fa-heart"></i>
</button>
<!-- Slide badge -->
#if(isset($latest[$type][$i]['terms']['property_labels']))
#for($k=0;$k<=count($latest[$type][$i]['terms']['property_labels']);$k++)
#if(isset($latest[$type][$i]['terms']['property_labels'][$k]))
<div class="slide__badge {!! ($latest[$type][$i]['terms']['property_labels'][$k]['attributes'] != '' || $latest[$type][$i]['terms']['property_labels'][$k]['attributes'] != null) ? $latest[$type][$i]['terms']['property_labels'][$k]['attributes'] : '' !!} text-uppercase">
{!! $latest[$type][$i]['terms']['property_labels'][$k]['name'] !!}
</div>
#endif
#endfor
#endif
<ul>
#if(isset($latest[$type][$i]['rooms']) && $latest[$type][$i]['rooms'] != 0)
<li><b>Стаи:</b> {!! $latest[$type][$i]['rooms'] !!}</li>
#endif
#if(isset($latest[$type][$i]['bathrooms']) && $latest[$type][$i]['bathrooms'] != 0)
<li><b>Бани:</b> {!! $latest[$type][$i]['bathrooms'] !!}
</li>
#endif
#if(isset($latest[$type][$i]['sqm']) && $latest[$type][$i]['sqm'] != 0)
<li><b>Квадратура:</b> {!! $latest[$type][$i]['sqm'] !!} m²</li>
#endif
</ul>
<p class="latest__properties__id">
ID: {!! $latest[$type][$i]['unique_code'] !!}</p>
<p class="latest__properties__price">
<span class="euro">€ {!! $latest[$type][$i]['price'] !!}</span>
<span
class="bgn">{!! $latest[$type][$i]['price_bgn'] !!} лв.</span>
</p>
<p class="latest__properties__created__at">
{!! $latest[$type][$i]['created_at'] !!}
</p>
</div>
</div>
</div>
#if($i == 3)
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center latest__properties_row">
#endif
#endif
#endfor
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center latest__properties_row">
</div>
</div>
</div>
</div>
I just figured it out... I was looking like 1000 times the code and that I realize I just forgot an empty slide right after the for loop.
There is an issue in the answer section of this code. The question section works fine, it is just the question.. when dd($questionnaire) answer array is there, but no items are shown.
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ $questionnaire->title }}</div>
<div class="card-body">
<a class="btn btn-dark" href="/questionnaires/{{ $questionnaire->id }}/questions/create">Create Question</a>
<a class="btn btn-dark" href="/surveys/{{ $questionnaire->id }}-{{ Str::slug($questionnaire->title) }}">Complete Questionnaire</a>
</div>
</div>
#foreach($questionnaire->questions as $question)
<div class="card mt-3">
<div class="card-header">{{ $question->question }}</div>
<div class="card-body">
<ul class="list-group">
#foreach($question->answers as $answer)
<li class="list-group-item">{{ $answer->answers }}</li>
#endforeach
</ul>
</div>
</div>
#endforeach
</div>
</div>
</div>
#endsection
dd Function means die and debug so your script stops at this point. Nothing else runs after dd
I am using Laravel 5.8 and in my controller I am showing 4 elements with paginate():
public function index()
{
$proyects = Proyect::latest()->paginate(4);
return view('proyect.index', compact('proyects'));
}
In the view the 4 elements are in a single row but I would like to show 2 elements for each row.
<div class="row">
<div class="col-10 col-lg-12 col-md-6">
<div class="card-deck">
#forelse($proyects as $proyect)
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as an
overlay for the body</p>
<a href="{{ route('proyect.show', $proyect) }}"
class="card-link">Ver mas</a>
</div>
<div class="card-footer">
<small class="text-muted">
{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
#empty
<li> Empty </li>
#endforelse
</div>
</div>
How to show 2 items per row instead of all items in a row?
public function index()
{
$proyects = Proyect::latest()->paginate(10);
return view('proyect.index', compact('proyects'));
}
array_chunk is a php function ca splice your array.
#forelse(array_chunk($proyects->all(),2) as $rows)
<div class="row">
#foreach($rows as $proyect)
<div class="col-10 col-lg-12 col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as overlay for the body</p>
Ver mas
</div>
<div class="card-footer">
<small class="text-muted">{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
</div>
</div>
#endforeach
</div>
#empty
<div>Empty ...</div>
#endforelse
May be this is your solution:
<div class="row">
#forelse($proyects as $proyect)
<div class="col-6 col-lg-6 col-md-6">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ $proyect->title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
{{ $proyect->descripcion }}</h6>
<p class="card-text">You can use the cap image as an
overlay for the body</p>
<a href="{{ route('proyect.show', $proyect) }}"
class="card-link">Ver mas</a>
</div>
<div class="card-footer">
<small class="text-muted">
{{ $proyect->created_at->diffForHumans() }}</small>
</div>
</div>
#empty
<li> Empty </li>
</div>
#endforelse
</div>
im newbie about statamic,
im try to solve this code :
<div class="container">
<div class="intro">
<div class="row">
<div class="col-md-12">
<h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
<div class="row-project-box row">
{{ relate:section_three_categories }}
{{ entries }}
<div class="col-project-box col-sm-6 col-md-4 col-lg-3">
<a href="{{ url }}" class="project-box">
<div class="project-box-inner">
<h5>{{ title }}</h5>
</div>
</a>
</div>
{{ /entries }}
{{ /relate:section_three_categories }}
</div>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>
</div>
the code provide this :
i want to align these box
direzionale operativo dirigenziale not in horizonatal but in vertical like this:
direzionale
operativo
dirigenziale
i think that is a bootstrap configuration but i dont know about the statamic world
anyone can help me ?
thanks a lot
The problem here seems that you are using responsive breakpoints on your columns,
so if you want to set the boxes one below the other all the times you have to set the .col-project-box always be full-width adding this class col-12 and set the .row-project-box horizontal alignment center adding this class justify-content-center to it.
<div class="container">
<div class="intro">
<div class="row">
<div class="col-md-12">
<h2 class="title-uppercase text-white">{{ section_three_title }}</h2>
<div class="row-project-box row justify-content-center">
{{ relate:section_three_categories }}
{{ entries }}
<div class="col-project-box col-12">
<a href="{{ url }}" class="project-box">
<div class="project-box-inner">
<h5>{{ title }}</h5>
</div>
</a>
</div>
{{ /entries }}
{{ /relate:section_three_categories }}
</div>
view all projects <i class="icon icon-chevron-right"></i>
</div>
</div>
</div>
I have these models:
ForumCategory
Forum
Topic
Reply
In the main forum page, I want to count and display the number of replies that associated to this forum.
All the models have relationships.
This is the view:
#foreach ($categories as $category)
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default striped">
<div class="panel-heading">
<div class="row">
<div class="col-md-11">{{ $category->name }}</div>
<div class="col-md-1 text-right"><a><span class="fa fa-arrow-down"></span></a></div>
</div>
</div>
#foreach ($category->forums as $forum)
<div class="panel-body">
<div class="row">
<div class="col-md-1 text-right"><span class="fa fa-envelope fa-4x"></span></div>
<div class="col-md-7">
<h4>
{{ $forum->name }}
<br>
<small>{{ $forum->description }}</small>
</h4>
</div>
<div class="col-md-1 post-num">
<h5>{{ $forum->topics->count() }}<br>
<small>Topics</small></h5>
<h5>{{ $forum->topics->replies->count() }}<br>
<small>Replies</small></h5>
</div>
<div class="col-md-3">
<img src="" class="img-circle last-comnt-img">
Last comment<br>
By Username<br>
<span class="text-muted">12:31</span>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
#endforeach
This line won't work:
$forum->topics->replies->count()