I am trying to display 3 results in each row. 1 result contains image,title and description. If description is a lengthy one, the 4th result in the second row will break. So I need to give after each row. I tried the following code, but didn't work.Thanks in advance.
<div class="row">
#if(count($reports['data']) > 0)
#foreach($reports['data'] as $reportsUser)
<div class="col-md-4 wow">
<article class="post post-2 post-2_mod-c clearfix">
<div class="entry-media">
#if($reportsUser['image'])
<img src="{{ asset(App\Http\Controllers\Controller::getThumbPath($reportsUser['image'])) }}"
alt="Foto" class="img-responsive" style="width:360px;height:192px;"/>
#else
<img src="{{asset('images/no_image.jpg')}}" alt="Foto" class="img-responsive"/>
#endif
</div>
<div class="entry-main">
<div class="entry-header">
<h2 class="entry-title ">{{$reportsUser['title']}}</h2>
</div>
<div class="entry-content">
<p>{!! str_limit($reportsUser['description'],127,"....") !!}</p>
</div>
<div class="entry-footer"><a href="{{ url('view-report/'.$reportsUser['id'])}}"
class="btn-link clsComClrRed">Continue Reading</a></div>
</div>
</article>
</div>
#endforeach
#endif
</div>
Change your #foreach statement to:
#foreach($reports['data'] as $i => $reportsUser)
Then, just before your first #endforeach (and after </div>), add:
#if ( $i % 3 == 2 )
<div class="clearfix"></div>
#endif
Related
I have two separate divs, one where the images are loaded and the other where the data is displayed.
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Slide Item -->
<div class="swiper-slide">
<div class="bg" style="background-image: url(include/assets/images/main-slider/1.jpg);">
</div>
</div>
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
#if(count($listings) > 0)
#foreach($listings as $listing)
<!-- Slide Item -->
<div class="swiper-slide">
<div class="content-outer">
<div class="content-box">
<div class="inner">
<h5>{{$listing->first_name}} {{$listing->last_name}}</h5>
<h1><span>{{$listing->name}}</span> </h1>
<div class="text">{{$listing->property_description}}.</div>
<div class="link-box">View Listing</div>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
</div>
So the first div will also be in a foreach loop, but I dont know how I can combine the two where they show the same related data.
Use 2 foreach loops . It is the easiest and desired solution for you. or you can define two variable and concat the contents using one forloop and then display them later like
#php
$first='';
$second='';
#endphp
#if(count($listings) > 0)
#foreach($listings as $listing)
#php
$first.='first div content';
$second.='second div content';
#endphp
#endforeach
#endif
<div class="banner-slider-image">
<div class="swiper-container">
<div class="swiper-wrapper">
{!!$first!!}
</div>
</div>
</div>
<div class="banner-slider-content">
<div class="side-text">AVANT</div>
<div class="swiper-container banner-slider">
<div class="swiper-wrapper">
{!!$second!!}
</div>
</div>
</div>
<html>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
use for yield
I want to fetch category wise data in home page's sections but I am unable to do this. Only one category section is working[enter image description here][1]
I made Section model and under this model Category model My IndexController Code :
<?php
namespace App\Http\Controllers\Front;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Slider;
use App\Category;
use App\Section;
class IndexController extends Controller
{
public function index(){
$sliders = Slider::where('status',1)->get();
$categories = Category::with('sections')->where('status',1)->get();
//dd($categories);die;
return view('frontend.index')->with(compact('sliders','categories'));
}
}
and blade file code is :
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best tours</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Tours")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best stays</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Stays")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
<section class="latest_work">
<div class="container">
<div class="row sub_content">
<div class="col-md-12">
<div class="dividerHeading">
<h4><span>Find your best cars</span></h4>
</div>
<div id="recent-work-slider" class="owl-carousel">
#foreach($categories as $category)
#if($category['sections']['section_name'] == "Cars")
<div class="product">
<figure class="touching effect-bubba">
<div class="product-img">
<img class="img-responsive" src="{{ asset('images/categories/'.$category['category_banner']) }}">
<div class="option">
<a class="fa fa-shopping-cart" href="portfolio_single.html"></a>
<a class="fa fa-search mfp-image" href="{{ asset('images/categories/'.$category['category_banner']) }}"></a>
</div>
</div>
</figure>
<div class="product-info">
<div class="product-title">
<h3>
{{ $category['category_name'] }}
</h3>
</div><br>
</div>
</div>
#endif
#endforeach
</div>
</div>
</div>
</div>
</section>
only one tours section's categories is showing but not showing other categories
Yes Only one tour sections is showing because of this condition in your code
#if($category['sections']['section_name'] == "Tours")
........................
#endif
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%;
}
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>
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