Avero Team Block

gistfile1.txt

<?php
  $teamTitleRow = get_field('team_title_row');
  $teamSectionBg = get_field('team_section_background_image');
?>

<div class="avero-team-block-wrap" style="background-image:url(<?php echo $teamSectionBg; ?>)">
  <div class="content-wrap">

    <div class="title-row">
      <span class="tiny-head"><?php echo $teamTitleRow['subtitle']; ?></span>
      <h2 class="title"><?php echo $teamTitleRow['title']; ?></h2>
      <div class="copy">
        <?php echo $teamTitleRow['content']; ?>
      </div>
    </div>

    <div class="team-grid-row facet-template">

      <?php 
      // Used to trigger JS
      // Hidden by CSS
      echo do_shortcode('[facetwp facet="hidden_search_facet"]');

      $args = array(  
        'post_type' => 'team',
        'post_status' => 'publish',
        'posts_per_page' => 3, 
        'orderby' => 'menu_order', 
        'order' => 'ASC',
        'facetwp' => true,
        'tax_query' => array(
          array(
            'taxonomy' => 'categories',
            'field' => 'slug',
            'terms' => 'executives',
          ),
        ),
      );

      $loop = new WP_Query( $args ); 
      $i = 0;
      $z = 0;
          
      while ( $loop->have_posts() ) : $loop->the_post(); 
        $jobTitle = get_field('job_title');
        $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
        $additionalFields = get_field('additional_fields');
      ?>  

        <!-- <div class="grid-item" style="background-image:url(<?php // echo $backgroundImg[0] ?>)"> -->
        <div class="grid-item" data-modal="modal<?php echo $i++; ?>">
          <img src="<?php echo $backgroundImg[0] ?>" alt="">
          <div class="gradient layer"></div>
          <div class="overlay">
            <div class="filter layer"></div>
            <i class="fa fa-plus"></i>
          </div>
          <div class="meta">
            <h5 class="title"><?php the_title(); ?></h5>
            <span class="tiny-head"><?php echo $jobTitle; ?></span>
          </div>
        </div>  

        <!-- The Modal -->
        <div id="modal<?php echo $z++; ?>" class="modal-window modal">

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            
            <div class="img-col">
              <img src="<?php echo $backgroundImg[0] ?>" alt="">
            </div>

            <div class="content-col">
              <h2 class="title"><?php the_title(); ?></h2>
              <span class="tiny-head"><?php echo $jobTitle; ?></span>
              <p><?php the_content(); ?></p>
              <div class="custom-fields">

                <?php if( have_rows('additional_fields') ): ?>
                  <ul class="list">
                  <?php while( have_rows('additional_fields') ): the_row(); 
                    // vars
                    $prompt = get_sub_field('prompt');
                    $answer = get_sub_field('answer');
                    ?>
                    <li class="item">
                      <span><?php echo $prompt; ?></span>: <span><?php echo $answer; ?></span>
                    </li>
                  <?php endwhile; ?>
                  </ul>
                <?php endif; ?>

              </div>
            </div>
          </div>

        </div>

      <?php endwhile; ?>
      
      <button class="fwp-load-more"><span class="tiny-head">See More</span> <i class="fa fa-plus tiny-head"></i></button>

      <?php wp_reset_postdata(); ?>

    </div>
  </div>
</div>