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
– Sylent, Commented Jan 3, 2018 at 9:46
@Sylent please check my answer: stackoverflow.com/a/48074956/5013099 — Muhammad Inaam Munir
– Muhammad Inaam Munir, Commented Jan 3, 2018 at 9:57

Muhammad Inaam Munir · Accepted Answer · 2018-01-03 09:53:20Z

2

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

answered Jan 3, 2018 at 9:53

Muhammad Inaam Munir

1,26010 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylent Over a year ago

Thanks man, I didn't know laravel had a $loop variable but it works now! thanks man!

M K Garwa · Accepted Answer · 2018-01-03 09:51:21Z

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.

Collectives™ on Stack Overflow

How to create dynamic layout in Laravel with Blade?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related