Laravel Blade Loops

Published:
Sunday 5th of September 2021


Reading Time:
2 minutes

Intro

Today's blog post isn't going to be a big one but something i just find cool with Laravel Blade Templates which makes life easier when working with loops....

Lets Get Started

I'm just about to change my theme with another incredible theme from WickedTemplates. It's an old theme from WickedTemplates which is actually no longer available for download. however i want to use the alternate Cards for my blog tiles.... see the image below.

Now i'll be changing the format of the tiles so it will only have a single "text block" but you'll get the idea from the next bit.

Lets Loop!

The Laravel Blade Templating engine is incredible, its incredibly powerful and is actually used by other frameworks as its that awesome!.

Anyway back to the matter at hand. I want to use alternate HTML/CSS cards in my Foreach. first thing to do is checkout the incredible Docs at Laravel.

I cant stress how incredible the documentation at Laravel is... it makes people like me look much better than i am :P

So back to the Loop... if you go to the Laravel Docs website and in the search bar type whatever you need to look for you will get an answer.... Simple....

So i search for "Loop" and i get a huge page which is actually the blade templating page.

when you get to the loop page there is a shed load of options:

Now straight away i can see Even and Odd Loops, and that's exactly what i need.

Lets build the foreach

So i know i'm using the loop variable and the odd and even properties.

Lets look at the current code i have.....

@foreach($posts as $post)
    {{--First Iteration --}}
    <div class="container w-full pt-20 pb-10 mx-auto ">
           Card classes here
    </div>
    {{--Second Iteration--}}
    <div class="container w-full py-10 mx-auto ">
           Card classes here
    </div>
@endforeach

Lets split the loop up to the odd and even loop

Take a look at the code below and you get the idea of what is required.

@foreach($posts as $post)
    @if($loop->even)
        <div class="container w-full pt-20 pb-10 mx-auto ">
        	Classes here
        </div>
    @endif
    @if($loop->odd)
        <div class="container w-full py-10 mx-auto ">
        	Classes here
        </div>
    @endif
@endforeach

So whats happening here?

In its simplest form you're loop is now choosing what to display depending on if the loop is an odd or even iteration, depending on whats returned from the array. Below is the result of the above odd/even loop.

For the above example i added a pagination to my controller to only display 3 posts as the blog cards are quite big. My controller for the blog index is as follows:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Wink\WinkPost;

class BlogController extends Controller
{
    public function index()
    {
        $posts = WinkPost::with('tags')
            ->live()
            ->orderBy('publish_date', 'DESC')
            ->simplePaginate(3);
        return view('blog.index', [
            'posts' => $posts,
        ]);
    }

    public function show ($slug)
    {
        $post = WinkPost::live()->whereSlug($slug)->firstOrFail();

        return view('post.index', [
            'post' => $post
        ]);
    }

}

If you want to build a blog functionality into your Laravel Application, i highly recommend Laravel Wink.

Well that's it for the post today, it was just a quick one to show how easy it is to manipulate a loop in Laravel

If you found the post helpful please follow me on twitter @skino2020 and if you're feeling really generous you can buy me a coffee here.