Любой способ изменить этот код, чтобы я не повторял идентичный HTML-код 4 раза?

Question

Как вы можете видеть, в элементах col-home-1 до col-home-4 я использовал один и тот же HTML-код, и мне это не нравится, однако я не совсем уверен, как избежать его повторения 4 раза , Любые советы будут оценены.

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

@if (!empty($images1))
    <div class="col-home-1">
    @foreach($images1 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

@if (!empty($images2))
    <div class="col-home-2">
    @foreach($images2 as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

@if (!empty($images3))
    <div class="col-home-3">
        @foreach($images3 as $image)
            <div class='imageContainer'>
                <div class="stickyContainer blackGradient">
                    <h1 class='imageTitle'>{{$image->name}}</h1>
                    <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                    <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                    @auth
                    <div class='votingContainer'>
                        <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                        <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                        <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                    </div>
                    @endauth
                </div>
            </div>
        @endforeach
    </div>
@endif

    @if (!empty($images4))
        <div class="col-home-4">
            @foreach($images4 as $image)
                <div class='imageContainer'>
                    <div class="stickyContainer blackGradient">
                        <h1 class='imageTitle'>{{$image->name}}</h1>
                        <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                        <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                        @auth
                        <div class='votingContainer'>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                            <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                            <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                        </div>
                        @endauth
                    </div>
                </div>
            @endforeach
        </div>
@endif
</div>

Answer 1

Вы можете создать частичное в папке views:

imagesКомпонент:

@if (!empty($images))
    <div class="{{$class}}">
    @foreach($images as $image)
        <div class='imageContainer'>
            <div class="stickyContainer blackGradient">
                <h1 class='imageTitle'>{{$image->name}}</h1>
                <img class='uploadedImg' src='{{url("storage/uploads/images/thumbnails/".$image->file_name)}}' alt='Random image'/>
                <a class='specialA' href='{{url("image/".$image->id)}}'></a>
                @auth
                <div class='votingContainer'>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 1 ) ? "liked" : "like" }}' id='{{$image->id}}'></a>
                    <p class='voteCount'>{{ $image->upvotes - $image->downvotes }}</p>
                    <a href='#' class='vote {{ ( auth()->user()->votes()->whereImageId($image->id)->first() && auth()->user()->votes()->whereImageId($image->id)->first()->vote == 0 ) ? "disliked" : "dislike" }}' id='{{$image->id}}'></a>
                </div>
                @endauth
            </div>
        </div>
    @endforeach
</div>
@endif

Тогда, по вашему мнению, вы сделаете это так:

<div class="flex-grid-home">
@php($count = 0)
@foreach($images as $image)
    @if ($count % 4 == 0)
        @php($images1[] = $image)
    @elseif($count % 4 == 1)
        @php($images2[] = $image)
    @elseif($count % 4 == 2)
        @php($images3[] = $image)
    @else
        @php($images4[] = $image)
    @endif
    @php($count++)
@endforeach

@include('imagesComponent', ['images' => $images1, 'class' => "col-home-1"])
@include('imagesComponent', ['images' => $images2, 'class' => "col-home-2"])
@include('imagesComponent', ['images' => $images3, 'class' => "col-home-3"])
@include('imagesComponent', ['images' => $images4, 'class' => "col-home-4"])

</div>