laravel/blade cycle in template

Question

I need your help. Here is my template file. How can I make to work that template? Main problem is that I don't know how to change div class values. Now I can make working only <div class="thumb-left"> but I also need <div class="thumb-middle"> and <div class="thumb-right"> .

Thank you.

   @extends('_layouts.main')

    @section('content')


    <div id="content-section">
    @foreach ($uploads as $upload)
        <div class="thumb-left">
            <img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
            <div class="thumb-info">
                <a href="#">{{ $upload->image_title }}</a>
                <a class="cat" href="#">PHOTOS</a>
            </div>
        </div>
@endforeach
        <div class="thumb-middle">
            <a href="#"><img alt="sunset" title="Sunset HDR" src="img/thumb.jpg" height="250" width="300"></a>
            <div class="thumb-info">
                <a href="#">{{ $upload->image_title }}</a>
                <a class="cat" href="#">PHOTOS</a>
            </div>
        </div>
        <div class="thumb-right">
            <a href="#"><img alt="sunset" title="Sunset HDR" src="img/thumb.jpg"></a>
            <div class="thumb-info">
                <a href="#">City Sunset HDR</a>
                <a class="cat" href="#">PHOTOS</a>
            </div>
        </div>

    </div>


    @stop

Answer 1

You could do:

@foreach ($uploads as $upload)
    <div class="thumb-{{ array('left', 'middle', 'right')[($loop->iteration-1)%3] }}">
        <img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
        <div class="thumb-info">
            <a href="#">{{ $upload->image_title }}</a>
            <a class="cat" href="#">PHOTOS</a>
        </div>
    </div>
@endforeach

The $loop variable is a build in blades variable - check the docs :

When looping, a $loop variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop. For instance: $loop->iteration - the current loop iteration (it starts at 1).

Answer 2

You probably want to change your foreach to also use a key, so you can know at which index in your array you are:

<div id="content-section">
@foreach ($uploads as $index => $upload)
    <div class="thumb-left">
        <img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
        <div class="thumb-info">
            <a href="#">{{ $upload->image_title }}</a>
            <a class="cat" href="#">PHOTOS</a>
        </div>
    </div>
@endforeach
</div>

Now, if I understand properly, what you're looking for is to switch from thumb-left , to thumb-middle and then finally thumb-right , and then loop again. You could use modulo to assign your class name based on the current index. This is untested code but you could probably use something along the lines of:

<div id="content-section">
{{ $classnames = array("thumb-left", "thumb-middle", "thumb-right"); }}
@foreach ($uploads as $index => $upload)
    <div class="{{ $classnames[$index % count($classnames)] }}">
        <img alt="{{ $upload->image_title }}" title="{{ $upload->image_title }}" src="/files/images/{{ $upload->imagefile }}" height="250" width="300">
        <div class="thumb-info">
            <a href="#">{{ $upload->image_title }}</a>
            <a class="cat" href="#">PHOTOS</a>
        </div>
    </div>
@endforeach
</div>