I have a column of album covers. I want to take me to the album details after click on the cover. Actually it takes me to the album details but it shows all results, not only this one which was clicked.
AlbumDetailsController
public function index(): View
{
return View("details.index", [
'albums' => Album::paginate(1)
]);
}
AlbumDetails Blade view
#extends('layouts.app')
#section('content')
<div class="container">
#foreach ($albums as $album)
<h1 class="my-4">{{ $album->name }}</h1>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="card h-100">
<div class="card-body">
<h4 class="card-title">
</h4>
{{ $album->artist }}
</div>
</div>
</div>
<div class="col-lg-6 mb-4">
<div class="card h-100">
<img src="{{asset('storage/' . $album->image_path)}}" alt="" class="img-fluid card-img-top">
<div class="card-body">
<h4 class="card-title">
{{ $album->artist }}
</h4>
{{ $album->description }}
</div>
</div>
</div>
</div>
#endforeach
#endsection
I've tried to solve this in differents ways but everything is not working. I think problem is with my controller but I'm really don't know how to modify it to show only this item which was clicked.
Related
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-lg-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
#foreach($reviews as $items)
<div class="carousel-item #if($loop->first) active #endif">
<div class="row">
#foreach($reviews as $review)
<div class="col-lg-4 ">
<a>
<div class="home1-img mt-3">
<?php
for($i=1;$i<6;$i++){
$check = '';
if($review->number_of_stars >= $i){
$check = 'checked';
}
echo '<span class="fa fa-star '.$check.'"></span>';
}
?>
<div class="home1-text mt-1" style="margin-bottom:30px;">
<p>{!! Illuminate\Support\Str::limit($review->customer_review,100) !!}</p>
<h5 class="text-color font-weight-bold">{{ $review->customer_name }}</h5>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
I am getting all the records in all sides but I want 3 records in 1st slide then 3 records in 2nd slide and so on. I have tried many times but I am not able to fix it.
I'm trying to make a small accordion page that similar to this however I can't get it so that other panels close when one is opened.
<div class="panel-group" id="accordion">
#foreach($questions as $_question)
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ $_question['sort']}}">{{ $_question['question'] }}</a>
</h4>
</div>
<div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in">
<div class="panel-body">
<p>{!!$_question['answer'] !!}</p>
</div>
</div>
</div>
#endforeach
</div>
You're missing decare id to your panel-heading, and the aria-labelledby= in your panel-body.
Try this code:
<div class="panel-group" id="accordion">
#foreach($questions as $_question)
<div class="panel panel-default">
<div class="panel-heading" id="heading-{{ $_question['sort'] }}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse-{{ $_question['sort']}}" aria-expanded="true" aria-controls="collapse-{{ $_question['sort']}}">
{{ $_question['question'] }}
</a>
</h4>
</div>
<div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in" aria-labelledby="heading-{{ $_question['sort'] }}" data-parent="#accordion">
<div class="panel-body">
<p>{!!$_question['answer'] !!}</p>
</div>
</div>
</div>
#endforeach
</div>
everyone, I have a problem in laravel blade I have a page for my website that show all the image because my website is a sale website but when I load the page it shows all the images but I don't want to show all the images I want to hide a images after three or four columns if someone can help me please.
thanks for everyone.
this is my blade code:
<section class="container custom-margin ">
<h5 class="text-center" style="text-shadow: 1px 1px 2px black; color: #1b1e21">مجموعه ما با ۲۰۰۰ خوابگا در سطح کشور</h5>
<div class="justify-content-center thin-underline-1"></div>
<div class="row justify-content-center">
#foreach($hostels as $hostel)
#foreach($hostel->hostelDetails->attachments as $photo)
<div class=" col-12 col-sm-6 col-md-6 col-lg-3 px-1 mt-4 small-device-hid ">
<div class="card card-shadow custom-height-1 " style="border-radius: 0%">
<a href="{{route('khabgah_detailes.goToDetails',$hostel->id)}}"> <img src="/images/{{ $photo->file_name }}"
class="card-img-top card-img custom-card-img-height" alt=""></a>
<div class="car-body">
<div class="card-footer">
<div class="custom-circle"><p class="custom-circle-text card-text"><b>
#if($hostel->type == 1)
{{ 'ذکور'}}
#else {{ 'اناث' }}
#endif
</b></p></div>
<div class="custom-prices card-text text-left"> کرایه فی ماه : {{$hostel->hostelDetails->remark }} </div>
<div class="row mt-3">
<div class="col-12 col-sm-12 col-md-12 mb-2 ">
<span class="card-text">آدرس : {{$hostel->addresses->state }} {{$hostel->addresses->rood}}
{{$hostel->addresses->station }} {{$hostel->addresses->alley}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
#endforeach
</div>
</section>
Since every Laravel relation return a collection instance, you could as well use the take method to obtain the first N objects in your collection.
For example:
#foreach($hostel->hostelDetails->attachments->take(3) as $photos)
Another way would be to use the query builder of the attachments relation to limit the results at query level:
#foreach($hostel->hostelDetails->attachments()->limit(3)->get() as $photos)
The latter way would love preferred performance-wise as it would only fetch the needed models from the database. The former would fetch all the models from the database and would only display a few of them.
<div class="row">
#foreach($product as $data)
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img src="{{ asset('image/product_image/'.$data->product_image) }}" alt="photo">
<div class="card-body">
<h4 class="card-title">
{{ $data->product_name }}
</h4>
<h5>{{ $data->product_price }}</h5>
<p class="card-text">{{ $data->product_description }}</p>
</div>
<div class="card-footer">
<small class="text-muted">★ ★ ★ ★ ☆</small>
</div>
</div>
</div>
#endforeach
<!-- /.row -->
</div>
First collect what you want in the controller. It could be something like this:
$product = Product::all();
And then you must send the product variable to the view. Something like this:
return view('path.to.view', compact('product'));
By the way. it's better to use plural form products.
You can add the code in the blade to retrieve all the products from the product model
<div class="row">
#php
$product = App\Product::all();
#endphp
#foreach($product as $data)
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
<img src="{{ asset('image/product_image/'.$data->product_image) }}" alt="photo">
<div class="card-body">
<h4 class="card-title">
{{ $data->product_name }}
</h4>
<h5>{{ $data->product_price }}</h5>
<p class="card-text">{{ $data->product_description }}</p>
</div>
<div class="card-footer">
<small class="text-muted">★ ★ ★ ★ ☆</small>
</div>
</div>
</div>
#endforeach
<!-- /.row -->
</div>
Your code should be like this
Controller's index method,
public function index()
{
$product = Product::all();
return view('path', compact('product'));
}
I want the items of my $favs object to be grouped in 4 columns for each row
<div class="row row justify-content-center">
<div class="col-9">
<div class="row">
#foreach ($favs->items as $fav)
<ul class="col-sm-3 list-unstyled">
<li class="subcat-li">{{ $fav->name }}</li>
</ul>
#endforeach
</div>
</div>
</div>
I want it to look like this:
<div class="row">
#foreach($favs->items as $fav)
<div class="col-md-3">
{{ $fav->name }}
</div>
#endforeach
</div>