Laravel View display: #foreach within #if - php

Question

I'm using the materialisecss CSS framework within my Laravel Views, and I'm trying to set my layout such that:
if there is only one post available, it is displayed 6 columns wide,
offset by 3
if there are only 2 posts, they are both displayed 6 columns wide side by side
if there are more than 2 posts they are displayed 4 columns wide.
I have the code below as part of my view, but it doesn't like it, and returns the following:
Parse error: syntax error, unexpected 'elseif' (T_ELSEIF) (View: /home/testuser/sites/lsapp/resources/views/posts/index.blade.php)
#if(count($posts) > 0)
<div class="row">
#if (count($posts) === 1)
#foreach($posts as $post)
<div class="col s12 m6 offset-m3">
#elseif (count($posts) === 2)
#foreach($posts as $post)
<div class="col s12 m6">
#else
#foreach($posts as $post)
<div class="col s12 m4">
#endif
<a href="posts/{{$post->id}}">
<div class="card hoverable">
<div class="card-image">
<img src="http://via.placeholder.com/460x230">
<span class="card-title">{{$post->title}}</span>
<a class="btn-floating halfway-fab waves-effect waves-light red hover"><i class="material-icons">remove_red_eye</i></a>
</div>
<div class="card-content">
<p>
Created by {{$post->user->name}}<br>
<small>on {{$post->created_at->toDateString()}} at {{$post->created_at->toTimeString()}}</small>
</p>
</div>
</div>
</a>
</div>
#endforeach
</div>
#else
<div class="row">
<div class="col s12">
<div class="card">
<p>No posts found</p>
</div>
</div>
</div>
#endif
I think it has something to do with the foreach, but I'm not certain.
Note: There is probably a far better way of doing this, but I'm currently learning Laravel after teaching myself PHP, so it's not the end of the world.

Answer 1

You're getting the problem because you're not closing off the directives properly. Try something like this.
#if(count($posts) > 0)
<div class="row">
#foreach($posts as $post)
<div class="#if (count($posts) === 1) col s12 m6 offset-m3 #elseif (count($posts) === 2) col s12 m6 #else col s12 m4 #endif">
<a href="posts/{{$post->id}}">
<div class="card hoverable">
<div class="card-image">
<img src="http://via.placeholder.com/460x230">
<span class="card-title">{{$post->title}}</span>
<a class="btn-floating halfway-fab waves-effect waves-light red hover"><i
class="material-icons">remove_red_eye</i></a>
</div>
<div class="card-content">
<p>
Created by {{$post->user->name}}<br>
<small>on {{$post->created_at->toDateString()}}
at {{$post->created_at->toTimeString()}}</small>
</p>
</div>
</div>
</a>
</div>
#endforeach
</div>
#else
<div class="row">
<div class="col s12">
<div class="card">
<p>No posts found</p>
</div>
</div>
</div>
#endif

Answer 2

You need to #endforeach
#foreach($posts as $post)
....
#endforeach
The error is saying that there is an unexpected #elseif because the parser expects you to end the foreach before.

Answer 3

you can try this:
#if (count($posts) === 1)
<?php $class = 'col s12 m6 offset-m3'; ?>
#elseif (count($posts) === 2)
<?php $class = 'col s12 m6'; ?>
#else
<?php $class = 'col s12 m4'; ?>
#endif
#foreach($posts as $post)
<div class="{{ $class }}">
//rest of code...
#endforeach

Answer 4

Yes every directive must be closed properly. Meaning you should have the closing tag #endforeach after every #foreach statement.

Answer 5

If it's difficult. You can try
#php #endphp