vendredi 13 juillet 2018

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 categories, 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-" data-toggle="tab" href="#nav-outdoor-" role="tab" aria-selected="true">
                
            </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- --}}" role="tabpanel">
    <div class="row clearfix">
        <div class="col-lg-6">
            @if ($loop->first)
            <article>
                <div class="entry-image mb-3">
                    <a href=""><img src="" alt=""></a>
                    @foreach($post_tab->categories as $category)
                    <div class="entry-categories"><a href="#" class="bg-tech"></a></div>
                    @endforeach
                </div>
                <div class="entry-title">
                    <h3><a target="_blank" href=""></a></h3>
                </div>
                <div class="entry-content clearfix">
                    <p></p>
                </div>
            </article>
        </div>
        <div class="col-lg-6">
            @foreach($post_tabs as $key => $post_tab)
            @if($key > 0) 
            <article>
                <div class="entry-image">
                    <a href="#"><img src="" alt=""></a>
                </div>
                <div class="entry-c">
                    <div class="entry-title">
                        <h4><a href="#"></a></h4>
                    </div>
                </div>
            </article>
            @endif
            @endforeach
            @endif
        </div>
    </div>
</div>
</div>
@endforeach

Thank you so much.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire