Customize Relationship 1 result

• tannerwest

• April 27, 2017 at 8:02 am

I’ve built a website that has a section for featured posts, the featured posts have one large image on the left and 4 smaller images on the right side that fill in the second half of the section. I’ve been able to create what I want using relationship fields (two of them) on an option page allowing the user to select which posts they want to feature.

My issue, the only what I’ve been able to replicate my vision is to use two relationship fields. I would like to combine them into one relationship field. In order to do this I would need to be able to display the first result differently than the other 4. Here is what I have that works currently with two relationship fields:

function magazine_featured_articles() { ?>
	<div class="fa_grid ">
		<div class="fa_wrapper wrap grid-4">
			<?php
			$main_post = get_field('main_featured_article', 'option');

			if( $main_post ): ?>

				<div class="fa_module fa-big-thumb">
					<?php
					global $post;
					foreach( $main_post as $post):
						setup_postdata($main_post); ?>
						<div class="fa-module-thumb">
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'featured-image' ); ?>
								<div class="overlay"></div>
							</a>
						</div>
						<div class="fa-meta-info">
							<a href="<?php the_permalink(); ?>">
								<div class="big-grid-title"><h3><?php the_title(); ?></h3></div>
							</a>
						</div>
					<?php endforeach; ?>
				</div>
				<?php wp_reset_postdata();
			endif; ?>

			<? $featured_post = get_field('featured_articles', 'option');

			if( $featured_post ): ?>

				<div class="fa-grid-scroll">
					<?php foreach( $featured_post as $post):
						setup_postdata($featured_post); ?>
						<div class="fa_module fa-small-thumb">
							<div class="fa-module-thumb">
								<a href="<?php the_permalink(); ?>">
									<?php the_post_thumbnail( 'featured-image' ); ?>
									<div class="overlay"></div>
								</a>
							</div>
							<div class="fa-meta-info">
								<a href="<?php the_permalink(); ?>">
									<div class="big-grid-title"><h3><?php the_title(); ?></h3></div>
								</a>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
				<?php wp_reset_postdata();
			endif; ?>
		</div>
	</div>
<?php }

• John Huebner

• April 28, 2017 at 4:44 am

This can be solved by adding a counter. I have only included the loop and not all of your required code:

<?php 

function magazine_featured_articles() { 
  ?>
    <div class="fa_grid ">
      <div class="fa_wrapper wrap grid-4">
        <?php 
          $featured_posts = get_field('featured_posts_field', 'options');
          if ($featured_posts) {
            global $post;
            $count == 0;
            foreach ($featured_posts as $post) {
              if ($count == 1) {
                // first small image
                // need to insert this
                echo '<div class="fa-grid-scroll">';
              }
              ?>
                <div class="fa_module <?php 
                    if ($count == 0) {
                      echo 'fa-big-thumb';
                    } else {
                      echo 'fa-small-thumb';
                    }
                  ?>">
                  <?php 
                    setup_postdata($post);
                    
                    // the rest of code for displaying each image here
                    
                  ?>
                </div>
              <?php 
              $count++;
            } // end foeeach featured post
            wp_reset_postdata();
            // if the count of images > 1 then .fa-grid-scroll was inserted
            // need to close it 
            if ($count > 1) {
              echo '</div>';
            }
          } // end if posts
        ?>
      </div>
    </div>
  <?php 
}