I want to present my blade view in a nice way.

First id, it will show the image on the left, and the content on the right.

Second id, it will show the image on the right, and the content on the left. But I'm not sure how to loop this., 3rd id it will again show image on the left, and content on the right, and so on and so forth.

Anybody can help? Thanks

@foreach ($users as $user)
    <div >

        <!-- Image on the left-->
        <div >
            <img src="{{$user->image}}" >
        </div>

        <!-- Content on the right-->
        <div >
            <h2 >
                 {{$user->title}}
            </h2>
            <p >
                 {{$user->body}}
            </p>
            <ul >
                <li >
                    <span ><span >✓</span></span> {{$user->sub_1}}
                </li>
                <li >
                    <span ><span >✓</span></span> {{$user->sub_2}}
                </li>
                <li >
                    <span ><span >✓</span></span>  {{$user->sub_2}}
                </li>
            </ul>
        </div>
        <!-- End  Content -->
    </div>
    <div >

        <!-- Content on left-->
        <div >
            <h2 >
               {{$user->title}}
            </h2>
            <p >
                 {{$user->body}}
            </p>
            <ul >
                <li >
                    <span ><span >✓</span></span>  {{$user->sub_1}}
                </li>
                <li >
                    <span ><span >✓</span></span> {{$user->sub_2}}
                </li>
                <li >
                    <span ><span >✓</span></span> {{$user->sub_2}}
                </li>
            </ul>
        </div>
        <!-- End  Content -->

        <!-- Image on the right-->
        <div >
            <img src="{{$user->image}}" >
        </div>
    </div>
@endforeach

CodePudding user response：

Inside of a blade loop you have access to the $loop variable which you can use to check if the current index is odd or even.

@foreach ($users as $user)
    @if($loop->even) 
       {{-- The index is event --}}
    @else 
       {{-- The index is odd --}}
    @endif
@endforeach

or

@foreach ($users as $user)
    @if($loop->odd) 
       {{-- The index is odd --}}
    @else 
       {{-- The index is even --}}
    @endif
@endforeach

CodePudding user response：

You can use condition in loop. Like:

if($key % 2 == 0){
   // show right image and left content part
} else {
   // show left image and right content part
}

Updated file:

@foreach ($users as $key => $user)
    @if($key % 2 == 0)
        <div >

            <!-- Content on left-->
            <div >
                <h2 >
                    {{$user->title}}
                </h2>
                <p >
                    {{$user->body}}
                </p>
                <ul >
                    <li >
                        <span ><span >✓</span></span>  {{$user->sub_1}}
                    </li>
                    <li >
                        <span ><span >✓</span></span> {{$user->sub_2}}
                    </li>
                    <li >
                        <span ><span >✓</span></span> {{$user->sub_2}}
                    </li>
                </ul>
            </div>
            <!-- End  Content -->

            <!-- Image on the right-->
            <div >
                <img src="{{$user->image}}" >
            </div>
        </div>
    @else
        <div >

            <!-- Image on the left-->
            <div >
                <img src="{{$user->image}}" >
            </div>

            <!-- Content on the right-->
            <div >
                <h2 >
                    {{$user->title}}
                </h2>
                <p >
                    {{$user->body}}
                </p>
                <ul >
                    <li >
                        <span ><span >✓</span></span> {{$user->sub_1}}
                    </li>
                    <li >
                        <span ><span >✓</span></span> {{$user->sub_2}}
                    </li>
                    <li >
                        <span ><span >✓</span></span>  {{$user->sub_2}}
                    </li>
                </ul>
            </div>
            <!-- End  Content -->
        </div>
@endforeach

CodePudding user response：

It's easier than you think. You just have to use a variable that you may only access inside a @foreach that is $loop. This variable comes with many helpful properties you can read on here but the ones you need are $loop->even and $loop->odd. Coupled with the ternary operator to make a condition inside the class and tailwind's ability to reorder items, this should be easily manageable without having to duplicate any code.

@foreach($users as $user)
    <div order-first" : "order-last"}}">image</div>
    <div order-first" : "order-last"}}">content</div>
@endforeach()