CODEWITHSUNDEEP
phptwitter-bootstraplaravelfor-loopmasonry
Ricki Moore
Ricki Moore

Reputation: 1223

Laravel ForEach Into Separate DIVs

Im working on a project that will display articles based on a user's interest. I have a user_table, follower_table, and article_table. Currently i am able to get the user_id and grab all their associated interests from the follower_table and each article produced under their interest. Im using Foreach to loop through all their articles. However, now i want to be able to put each article into a different div based on their type. In order to be able to have varying sizes and color. What is the best way to filter the foreach loop? Here is my code below.

follower_table is set up:

user_id:(this is the person/interest you follow)

follower_id: (this is your id);

article_table is set up:

id

user_id

type: (music,fashion,events, dance)

title

body

photo

The UserController: 

class UserController extends Controller

{

public function index ()

{

    $ilike = Auth::id();
    $ifollow = DB::table('followers')->where('follower_id', $ilike)->lists('user_id');
    $articles = DB::table('articles')
        ->whereIn('user_id', $ifollow)->get();
    //$articles = DB::table('followers')->lists('title', 'name');
    //$articles = DB::table('followers')->where('follower_id', $ilike)->pluck('user_id');
    //$articles = Article::all();
    return view('pages.user', compact('articles'));
}

}

user.blade.php:

<div class = "grid">

                                    @foreach($articles as $article)

                                            <div class="grid-item ">
                                                <img src="/image/article/detail/{{$article->id}}.jpg"/>
                                            </div>

@endforeach

Upvotes: 1

Views: 688

Answers (1)

davsp
davsp

Reputation: 2189

Since you are passing an Article request, you can use the $article->type attribute you declared, to use it to call css div classes. 

@foreach($articles as $article)
      <div class="grid-item {{$article->type}}">
      <img src="/image/article/detail/{{$article->id}}.jpg"/>
      </div>

And then create the desired colors in your app.css (or less/scss files):

.music {
}
.fashion{} .events{} .dance{};

Upvotes: 1

Related Questions