How to create dynamic layout in Laravel with Blade?

Question

So I'm building my first blog, and I'd like to dynamically show to posts on my landing page. I want the layout to become like this (might be a little weird):

post-image   - post-preview
post-preview - post-image
post-image   - post-preview

This is what I have right now to show to blog posts:

@foreach($posts as $post)
        <div class="col-sm-4">
            <a href="/post/{{ $post->slug }}">
                <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
                <span>{{ $post->title }}</span>
            </a>
        </div>
    @endforeach

web.php (route):

$posts = App\Post::take(3)->orderBy('created_at')->get();
return view('welcome', compact('posts'));

Now as I'd like to make the layout dynamically. I think I can do this by checking if the ID even or odd. However I have no idea on how to do this even when I've searched 50% of the web already :) .

If there is a better way on doing this just let me know! Greatly appreciated guys!

That's the part with the post-image and post-preview. I'd like the images to go from left to right one way or another but I can't seem to find a way to do this with. — Sylent, Jan 03 '18 at 09:46
@Sylent please check my answer: https://stackoverflow.com/a/48074956/5013099 — Muhammad Inaam Munir, Jan 03 '18 at 09:57

score 2 · Accepted Answer · answered Jan 03 '18 at 09:53

Yes you can do it by checking if current post or loop iteration is odd or even. (https://laravel.com/docs/5.5/blade#the-loop-variable) For Odd loop iteration, you can write image code first and in even loop iteration you can write preview code first to achieve your desired layout. You can check the following code:

@foreach($posts as $post)
    <div class="row">

         @if( $loop->iteration % 2 == 0 )
         <div class="col-md-4">
             <a href="/post/{{ $post->slug }}">
                 <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">

             </a>
         </div>

         <div class="col-md-8">
             <span>{{ $post->title }}</span>
         </div>

         @else
         <div class="col-md-8">
             <span>{{ $post->title }}</span>
         </div>

         <div class="col-md-4">
             <a href="/post/{{ $post->slug }}">
                 <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">

             </a>
         </div>
         @endif
    </div>
@endforeach

Thanks man, I didn't know laravel had a `$loop` variable but it works now! thanks man! — Sylent, Jan 03 '18 at 09:59

score 1 · Answer 2 · answered Jan 03 '18 at 09:51

Ok I guess I got your question. so there is no direct solution but you can measure inside your for loop by adding extra variable such as:

<?php $inc = 0;?>
@foreach($posts as $post)
    <div class="col-sm-4">
        <a href="/post/{{ $post->slug }}">
            @if($inc%2 == 0)
            <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
            <span>{{ $post->title }}</span>
            @else 
            <span>{{ $post->title }}</span> 
            <img src="{{ Voyager::image( $post->image ) }}" class="img-responsive" style="width:100%">
            @endif
            <?php $inc++;?>
        </a>
    </div>
@endforeach

Or you can use for loop instead of foreach of loop and inside for loop you can check variable i.e. i is odd or even.

How to create dynamic layout in Laravel with Blade?

2 Answers2