Duplicate classes after using foreach

154 Views Asked by At

I use a foreach to print out an attachment_image from a blog post. But for some reason a button duplicates the amount of posts and I dont know what I am doing wrong.

I am using sage 10 with bootstrap 5:

@php
   $images =& get_children( array (
    'post_parent' => $post->ID,
    'post_type' => 'attachment',
    'post_mime_type' => 'image'
));
@endphp
<section class="masonry-grid">
  <div class="container masonry__container">
    <div class="masonry__items">
      <div class="item masonry__item">
        <div class="masonry__images">
          @if ( empty($images) )
          @else
          @foreach ( array_unique($images) as $attachment_id => $attachment )
          <div class="masonry__image">
            {!! wp_get_attachment_image( $attachment_id, false ) !!}
          </div>
          @endforeach
          @endif
        </div>
        <div class="masonry__info">
          <div class="masonry__category">
            {{ get_the_category( $id )[0]->name }}
          </div>
          <div class="masonry__title">
            <a href="{{ get_permalink() }}">
              {!! $title !!}
            </a>
          </div>
        </div>
        <div class="masonry__socials">
          <div class="masonry__social">
            <div classs="masonry__authors">
              <i class="fas fa-at"></i><span class="masonry__author">@include('partials/entry-meta')</span>
            </div>
            <div class="masonry__views">
              <i class="fas fa-eye"></i><span class="masonry__author">149 views</span>
            </div>
            <div class="masonry__likes">
              <i class="far fa-thumbs-up"></i><span class="masonry__author">8 likes</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="masonry__buttons">
      <div class="masonry__loadmore">
        <button type="button" class="masonry__button btn btn-outline-secondary"><i class="fas fa-spinner"></i>Load more</button>
      </div>
    </div>
  </div>
</section>

I intend to display multiple items and a single button, yet, instead of the behavior I expect, as many buttons are displayed as many items there are.

0

There are 0 best solutions below