I'm sorry I do not know how to word this question. I'm new to Laravel and I want to either show a photo(s) or if there are no photos I want to show a placeholder. This works but there must be a better way to do it than this.
@foreach ($items as $item)
<?php $totalpics=0; ?>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
@if(! empty($item->photos) )
@foreach ( $item->photos as $photo )
@if ($photo->photo)
<a href="/storage/images/large/{{ $photo->photo }}"><img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}"></a>
<?php $totalpics++; ?>
@endif
@endforeach
@if(1 > $totalpics)
<a href="/items/{{ $item->id }}"><img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}"></a>
@endif
You can do
@foreach ($items as $item)
<div class="col-md-4">
<div class="card mb-4 box-shadow">
@unless($item->photos)
<a href="/items/{{ $item->id }}"><img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}"></a>
@else
@foreach ( $item->photos as $photo )
@if ($photo->photo)
<a href="/storage/images/large/{{ $photo->photo }}"><img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}"></a>
@endif
@endforeach
@endunless
There is another way to do that in laravel 5.3+ by using
@forelse($item->photos as $photo)
<a href="/storage/images/large/{{ $photo->photo }}"><img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}"></a>
@empty
<a href="/items/{{ $item->id }}"><img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}"></a>
@endforelse
You want to achieve a for loop and an optional statement for when there is nothing to show in the for loop.
Laravel uses the forelse
loop for this (see all blade loops in the documentation).
A basic forelse
could be:
@forelse($items as $item)
{{$item}}
@empty
There are no items to display
@endforelse
Above code is pseudo code and would not actually run
Which would render as either all the items
or as the text There are no items to display
.
In your case you could use:
@forelse($items as $item)
<div class="col-md-4">
<div class="card mb-4 box-shadow">
@forelse ( $item->photos as $photo )
@if ($photo->photo)
<a href="/storage/images/large/{{ $photo->photo }}">
<img src="/storage/images/small/{{ $photo->photo }}" class="card-img-top" alt="{{ $item->name }}">
</a>
@endif
@empty
<a href="/items/{{ $item->id }}">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="{{ $item->name }}">
</a>
@endforelse
</div>
</div>
@endforeach
Side note, this will not render any photos if there is a photo
model attached to your item
but the photo
model does not have the photo
property set, i.e. the for
loop will be used but the if
statement will fail.