Laravel ForEach В Раздельные DIVs

Question

Im работает над проектом, в котором будут отображаться статьи, основанные на интересах пользователя. У меня есть user_table, follower_table и article_table. В настоящее время я могу получить user_id и захватить все связанные с ними интересы из follower_table и каждой статьи, подготовленной по их интересам. Im, используя Foreach, чтобы просмотреть все их статьи. Тем не менее, теперь я хочу, чтобы каждая статья могла быть в другом div, основанном на их типе. Для того, чтобы иметь различные размеры и цвет. Каков наилучший способ фильтрации цикла foreach? Вот мой код ниже.

follower_table устанавливается:

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

follower_id: (this is your id); 

article_table устанавливается:

id 

user_id 

type: (music,fashion,events, dance) 

title 

body 

photo 

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

Answer 1

Поскольку вы передаете запрос статьи, вы можете использовать $ article-> тип атрибута вы объявили, чтобы использовать это называть классы css div.

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

, а затем создать нужные цвета в вашем app.css (или меньше/файлов SCSS):

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