Laravel Blade For each loop alternate display - laravel

Question

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 class="box-border flex flex-col items-center content-center px-8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16">
<!-- Image on the left-->
<div class="box-border relative w-full max-w-md px-4 mt-5 mb-4 -ml-5 text-center bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
<img src="{{$user->image}}" class="p-2 pl-6 pr-5 xl:pl-16 xl:pr-20 ">
</div>
<!-- Content on the right-->
<div class="box-border order-first w-full text-black border-solid md:w-1/2 md:pl-10 md:order-none">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
{{$user->title}}
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-12 xl:pr-32 lg:text-lg">
{{$user->body}}
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_1}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
</ul>
</div>
<!-- End Content -->
</div>
<div class="box-border flex flex-col items-center content-center px-8 mx-auto mt-2 leading-6 text-black border-0 border-gray-300 border-solid md:mt-20 xl:mt-0 md:flex-row max-w-7xl lg:px-16">
<!-- Content on left-->
<div class="box-border w-full text-black border-solid md:w-1/2 md:pl-6 xl:pl-32">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
{{$user->title}}
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-10 lg:text-lg">
{{$user->body}}
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_1}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
</ul>
</div>
<!-- End Content -->
<!-- Image on the right-->
<div class="box-border relative w-full max-w-md px-4 mt-10 mb-4 text-center bg-no-repeat bg-contain border-solid md:mt-0 md:max-w-none lg:mb-0 md:w-1/2">
<img src="{{$user->image}}" class="pl-4 sm:pr-10 xl:pl-10 lg:pr-32">
</div>
</div>
#endforeach

Answer 1

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

Answer 2

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 class="{{$loop->odd ? "order-first" : "order-last"}}">image</div>
<div class="{{$loop->even ? "order-first" : "order-last"}}">content</div>
#endforeach()

Answer 3

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 class="box-border flex flex-col items-center content-center px-8 mx-auto mt-2 leading-6 text-black border-0 border-gray-300 border-solid md:mt-20 xl:mt-0 md:flex-row max-w-7xl lg:px-16">
<!-- Content on left-->
<div class="box-border w-full text-black border-solid md:w-1/2 md:pl-6 xl:pl-32">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
{{$user->title}}
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-10 lg:text-lg">
{{$user->body}}
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_1}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
</ul>
</div>
<!-- End Content -->
<!-- Image on the right-->
<div class="box-border relative w-full max-w-md px-4 mt-10 mb-4 text-center bg-no-repeat bg-contain border-solid md:mt-0 md:max-w-none lg:mb-0 md:w-1/2">
<img src="{{$user->image}}" class="pl-4 sm:pr-10 xl:pl-10 lg:pr-32">
</div>
</div>
#else
<div class="box-border flex flex-col items-center content-center px-8 mx-auto leading-6 text-black border-0 border-gray-300 border-solid md:flex-row max-w-7xl lg:px-16">
<!-- Image on the left-->
<div class="box-border relative w-full max-w-md px-4 mt-5 mb-4 -ml-5 text-center bg-no-repeat bg-contain border-solid md:ml-0 md:mt-0 md:max-w-none lg:mb-0 md:w-1/2 xl:pl-10">
<img src="{{$user->image}}" class="p-2 pl-6 pr-5 xl:pl-16 xl:pr-20 ">
</div>
<!-- Content on the right-->
<div class="box-border order-first w-full text-black border-solid md:w-1/2 md:pl-10 md:order-none">
<h2 class="m-0 text-xl font-semibold leading-tight border-0 border-gray-300 lg:text-3xl md:text-2xl">
{{$user->title}}
</h2>
<p class="pt-4 pb-8 m-0 leading-7 text-gray-700 border-0 border-gray-300 sm:pr-12 xl:pr-32 lg:text-lg">
{{$user->body}}
</p>
<ul class="p-0 m-0 leading-6 border-0 border-gray-300">
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_1}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
<li class="box-border relative py-1 pl-0 text-left text-gray-500 border-solid">
<span class="inline-flex items-center justify-center w-6 h-6 mr-2 text-white bg-yellow-300 rounded-full"><span class="text-sm font-bold">✓</span></span> {{$user->sub_2}}
</li>
</ul>
</div>
<!-- End Content -->
</div>
#endforeach