How not to show image if there is none? - laravel

I have three table. Category, PostAd and PostImage.
To show post i have to show it from category table.
My controller Code.
$data['category'] = Category::with(['child','children','parent','postads.postimage','postads'=>function($q) use ($asc){
$q->orderBy('created_at',$asc);
}])->where('id',$id)->get();
To display image i have to use nested relationship in postads.postimage.
Blade Code
#foreach($category as $cat)
#foreach($cat->postads as $c)
<a href="{{route('particular',['id'=>$c->id])}}">
<li>
#foreach($c->postimage as $pi)
<img src="{{asset('thumbnail/'.$pi->image)}}" alt="No image" style="margin-top: 5px" >
#endforeach
<section class="list-left">
<h5 class="title">{{$c->adtitle}}</h5>
<span class="adprice">Rs. {{$c->price}}</span>
<p class="catpath">{{$cat->categoryname}} » {{$cat->categoryname}}</p>
</section>
<section class="list-right">
#auth
<div class="like1">
<i class="fas fa-heart" pid="{{$c->id}}" uid="{{auth()->user()->id}}"></i>
</div>
#endauth
<span class="date">{{date('D',strtotime($c->created_at))}}-{{date('M',strtotime($c->created_at))}}-{{date('Y',strtotime($c->created_at))}}</span>
<span class="cityname">{{$c->address}}</span>
</section>
<div class="clearfix"></div>
</li>
</a>
#endforeach
#endforeach
because of foreach loop my design gets damaged.
I want to show image alt but because of this nothing is shown and everything gets damaged.

You can use #forelse
#forelse($c->postimage as $pi)
<img src="{{asset('thumbnail/'.$pi->image)}}" alt="No image" style="margin-top: 5px" >
#empty
<!-- some HTML, default image or something, whatever you need -->
#endforelse
https://laravel.com/docs/5.8/blade#loops

Related

Laravel Carousel dynamic with carousel category array

MY SLIDER OF CATEGORY TEST IS DISPLAYED THIS WAY IN THE PICTURE i.e images appear below each other
enter image description here...I have tried change the category test with another category but i could not fix it.. i guess the issue mighty be how to display the active image slide first then the rest come after-wards
My view blade is
#foreach ($data['testSlider'] as $slide )
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="w-100 d-block" id="imgslide" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
<li data-target="#carousel-1" data-slide-to="0" class=""></li>
<li data-target="#carousel-1" data-slide-to="1"></li>
<li data-target="#carousel-1" data-slide-to="2"></li>
</ol>
</div>
#endforeach
MY SLIDER CONTROLLER HAS
use Illuminate\Http\Request;
use App\Models\website\backend\Slider;
use App\Models\website\backend\SliderCategory;
public function test()
{
$data['slider'] = Slider::all();
$data['slidercategory'] = SliderCategory::all();
$data['testSlider'] = Slider::with([
'SliderCategory' => function ($attachmentQuery) {
$attachmentQuery->where('title', 'test Slider');
}
])->get();
return view('testboot', compact('data'));
}
Your images are repeating because you are making an entire carousel for each image instead of adding the images to the first carousel.
<div class="carousel slide" data-ride="carousel" id="carousel-1">
<div class="carousel-inner" role="listbox">
#foreach ($data['testSlider'] as $slide )
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
<img class="w-100 d-block" id="imgslide-{{$loop->index}}" src= "{{asset('images/' . $slide->image)}}" alt="Slide Image">
</div>
#endforeach
</div>
<div>
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
<ol class="carousel-indicators">
#foreach ($data['testSlider'] as $slide )
<li data-target="#carousel-1" data-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"></li>
#endforeach
</ol>
</div>

Displaying posts in custom formation

I would like to output posts in order provided by this image (every 3 posts)
here is my blade code:
<section class="blog_area p_120">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="blog_left_sidebar">
#foreach ($raksti as $raksts)
<article class="blog_style1">
<div class="blog_img">
<img class="img-fluid" src="{{$raksts->image}}" alt="">
</div>
<div class="blog_text">
<div class="blog_text_inner">
<div class="cat">
<a class="cat_btn" href="#">{{$raksts->kato->title}}</a>
<i class="fa fa-calendar" aria-hidden="true"></i> {{$raksts->created_at}}
<i class="fa fa-comments-o" aria-hidden="true"></i> 05
</div>
<a href="#">
<h4>{{$raksts->title}}</h4>
</a>
<p>{{$raksts->short_desc}}</p>
<a class="blog_btn" href="#">Lasīt vairāk</a>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
</section>
For those small blocks the "article" tag have class ="blog_style1 small"
I guess that there need to work with a "for" loop, so can anyone help me to achieve this task and explain a little how that works?
Take a look, you need to tell your code that one image of three has to be wide.
So that you can use modulo:
#foreach ($raksti as $key => $value)
#if($key % 3 = 0)
// set width 100%
#else
// set width 50%
#endif
#endforeach
That makes every third element as 100% wide.
try next code
#foreach ($raksti as $key => $raksts)
//
#if($key % 3 == 1)
// set here style css width 100 %
#else
// set here style css width 50 %
#endif
#endforeach
Laravel has loop variables:
https://laravel.com/docs/5.8/blade#the-loop-variable
You can use $loop->index inside yor foreach and check whether your article must have class small
<article class="blog_style1 #if($loop->index % 3 !== 0) small #endif">
Or you can simply use CSS nth-child
https://css-tricks.com/how-nth-child-works/
Give class small each third element
<section class="blog_area p_120">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="blog_left_sidebar">
#foreach ($raksti as $key => $raksts)
<article class="blog_style1 {{ ($key % 3 != 0) ? 'small' : '' }}">
<div class="blog_img">
<img class="img-fluid" src="{{$raksts->image}}" alt="">
</div>
<div class="blog_text">
<div class="blog_text_inner">
<div class="cat">
<a class="cat_btn" href="#">{{$raksts->kato->title}}</a>
<i class="fa fa-calendar" aria-hidden="true"></i> {{$raksts->created_at}}
<i class="fa fa-comments-o" aria-hidden="true"></i> 05
</div>
<a href="#">
<h4>{{$raksts->title}}</h4>
</a>
<p>{{$raksts->short_desc}}</p>
<a class="blog_btn" href="#">Lasīt vairāk</a>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
</section>
Hope this helps you
no need to do this in the backend. Use the nth-child functionality of CSS:
.blog_style1{
width: 50%;
}
.blog_style1:nth-child(4n){
width: 100%;
}

making pagination in laravel for image

Hello for everyone I have a problem in laravel that about the showing images in one view, the problem is: I have a page that just show the images but it show all the images stored in table with specific id but I want to show some of that and have a button (show more) and when click on button it show the other images I don't know hove can I do this if someone can help me please!
This is my controller code:
public function listHostel()
{
$hostels = Hostel::all();
return view('front/khabgah_list',compact('hostels'));
}
And this is my blade code:
#foreach($hostels as $hostel)
#foreach($hostel->attachments as $photo)
<div class=" col-12 col-sm-6 col-md-6 col-lg-3 px-1 mt-3">
<div class="card card-shadow custom-height-1 " style="border-radius: 0%">
<a href="">
<img src="/assets-/app/media/img/blog/hostels-img/{{$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->remark }}
</div>
</div>
</div>
</div>
</div>
#endforeach
#endforeach
Pagination is likely what you're looking for. Change your controller to:
public function listHostel()
{
$hostels = Hostel::all()->paginate(5);
return view('front/khabgah_list',compact('hostels'));
}
Then you can get the links in your Blade template:
{{ $hostels->links() }}
You might need to change it a bit to work for your specific situation. The documentation gives some more info: https://laravel.com/docs/5.8/pagination

Laravel 5: How to get posts by specific categories and display in tabs

I'm building a news site. I want to get 6 latest posts by 3 specific categories, lets say id 2, 3, 4, and display them in 3 tabs on homepage.
Each tab is divided in 2 column, col-6. one col-6 display the latest record, the other display a list of another 5 records after the latest one.
Here's my controller, I get 6 latest records from database
$post_tabs = Post::with('categories')->latest()->limit(6)->get();
this I get 3 categories that have id 2, 3, 4
$category_tabs = Category::with('posts')->whereIn('id', [2, 3, 4])->get();
In blade view, I managed to display that 3 category tabs, like so
<div class="collapse navbar-collapse justify-content-between" id="navbarToggler1">
<ul class="nav nav-sm navbar-nav mr-md-auto mr-lg-0 mt-2 mt-lg-0 align-self-end" role="tablist">
#foreach($category_tabs as $tab_category)
<li class="nav-item">
<a class="nav-link bg-color-tech active" id="nav-outdoor-tab-{{$tab_category->id}}" data-toggle="tab" href="#nav-outdoor-{{$tab_category->id}}" role="tab" aria-selected="true">
{{$tab_category->title}}
</a>
</li>
#endforeach
</ul></div>
Now I don't know how to display posts of those categories by tabs, this is what i 've got so far, which only display 6 latest post and I don't know how to make tabs work either
#foreach($post_tabs as $key => $post_tab)
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-outdoor-{{-- {{$tab_category->id}} --}}" role="tabpanel">
<div class="row clearfix">
<div class="col-lg-6">
#if ($loop->first)
<article>
<div class="entry-image mb-3">
<img src="{{asset($post_tab->thumbnail)}}" alt="{{$post_tab->title}}">
#foreach($post_tab->categories as $category)
<div class="entry-categories">{{$category->title}}</div>
#endforeach
</div>
<div class="entry-title">
<h3><a target="_blank" href="{{route('post.show',[$post_tab->slug])}}">{{$post_tab->title}}</a></h3>
</div>
<div class="entry-content clearfix">
<p>{{$post_tab->description}}</p>
</div>
</article>
</div>
<div class="col-lg-6">
#foreach($post_tabs as $key => $post_tab)
#if($key > 0)
<article>
<div class="entry-image">
<img src="{{asset($post_tab->thumbnail)}}" alt="">
</div>
<div class="entry-c">
<div class="entry-title">
<h4>{{$post_tab->title}}</h4>
</div>
</div>
</article>
#endif
#endforeach
#endif
</div>
</div>
</div>
</div>
#endforeach
Thank you so much.
You don't need to fetch category and post separately. You can fetch both using eager loading. For that you can define extra relationship in Category model like this
Category Model
public function latestPosts(){
return $this->hasMany('App/Post')->latest()->take(6);
}
public function beforeLatestPosts(){
return $this->hasMany('App/Post')->latest()->slice(6)->take(5);
}
Fetch in controller
$category_tabs = Category::with('latestPosts', 'beforeLatestPosts')->whereIn('id', [2, 3, 4])->get();
In view
Print Tab header
<div class="collapse navbar-collapse justify-content-between" id="navbarToggler1">
<ul class="nav nav-sm navbar-nav mr-md-auto mr-lg-0 mt-2 mt-lg-0 align-self-end" role="tablist">
#foreach($category_tabs as $tab_category)
<li class="nav-item">
<a class="nav-link bg-color-tech active" id="nav-outdoor-tab-{{$tab_category->id}}" data-toggle="tab" href="#nav-outdoor-{{$tab_category->id}}" role="tab" aria-selected="true">
{{$tab_category->title}}
</a>
</li>
#endforeach
</ul>
</div>
Print Tab Content
#foreach($category_tabs as $tab_category)
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-outdoor-{{$tab_category->id}}" role="tabpanel">
<div class="row clearfix">
<div class="col-lg-6">
#foreach($tab_category->latestPosts as $latestPost)
<article>
<div class="entry-image mb-3">
<img src="{{asset($latestPost->thumbnail)}}" alt="{{$latestPost->title}}">
</div>
<div class="entry-title">
<h3><a target="_blank" href="{{route('post.show',[$latestPost->slug])}}">{{$latestPost->title}}</a></h3>
</div>
<div class="entry-content clearfix">
<p>{{$latestPost->description}}</p>
</div>
</article>
#endforeach
</div>
<div class="col-lg-6">
#foreach($tab_category->beforeLatestPosts as $beforeLatestPost)
<article>
<div class="entry-image">
<img src="{{asset($beforeLatestPost->thumbnail)}}" alt="">
</div>
<div class="entry-c">
<div class="entry-title">
<h4>{{$beforeLatestPost->title}}</h4>
</div>
</div>
</article>
#endforeach
</div>
</div>
</div>
</div>
#endforeach

how to create pagination to change html in laravel

<div class="row clearfix">
#foreach($distric->area_list as $area_list)
#foreach($area_list->directory as $directory)
#foreach($directory->dir_category_sub_set as $dir_category_sub_set)
#if($dir_category_sub_set->sub_category_id == '557057')
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/img/content/post-img-12.jpg" alt="">
<div class="rating">
<ul class="list-inline">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star-half-o"></i></li>
<li><i class="fa fa-star-o"></i></li>
</ul>
<p>Featured</p>
</div> <!-- end .rating -->
<figcaption>
<div class="bookmark">
<i class="fa fa-bookmark-o"></i> Bookmark
</div>
<div class="read-more">
<i class="fa fa-angle-right"></i> Read More
</div>
</figcaption>
</figure>
<h4>{{$directory->name_of_the_business_place}}</h4>
<h5>{{$directory->address_no_of_the_business_place}},{{$directory->address_street_of_the_business_place}}, {{$area_list->name}},{{$distric->name}}</h5>
<p>T.P:
#if($directory->phone_of_the_business_place>0)
{{$directory->phone_of_the_business_place}}/
#endif
{{$directory->mobile_of_the_business_place}} <br> {{$directory->created_date}}</p>
<a class="read-more" href="https://hanuma.lk/{{$directory->field_link}}"><i class="fa fa-angle-right"></i>Read More</a>
</div> <!-- end .single-product -->
</div> <!-- end .grid-layout -->
#endif
#endforeach
#endforeach
#endforeach
I have this code and I want to create pagination to this how to do this can I do this without any page refreshing? I can not use laravel pagination method because I do not get data from database directly
I searched different methods to add pagination but I could not fined a suitable method for my project
Laravel has provided paginate method that you can use laravel pagination
you only need to retrieve the data and add the method like:
$documents = District::find($id)->area_list()->directory()->get();
return response()->json($documents);
and show the link of pagination in your view like:
{{$documents->links()}}
#foreach($documents as $document)
{{$document->name}}
#endforeach
finish, this is the example how to use pagination.

Resources