Checkboard layout

README.md

Checkboard layout ( Fifty Fifty layout )

A.K.A. alternating image and content blocks on each row.

SASS Version is a basic 50/50 with no CTA added in.

Adding this here because I'm sick of recreating it over & over. Includes option for a CTA anywhere you want using the Flexible Layout option.

basic-fifty.php

<?php 
// Start Flexible Content
if ( have_rows( 'flex_section' ) ) : 
	 while ( have_rows('flex_section' ) ) : the_row();
	
		// Layout Name: layout_name
		if ( get_row_layout() == 'fifty_section' ) : 
			$flip_tracker = 0; 
			$fifty = get_sub_field('fifty_fifty');
			pk_print($fifty);
?>
<div class="fifty-container">
		<?php 
			foreach( $fifty as $fifth ): 
		?>
				<div class="row">
					<div class="fifty half-image <?php echo $flip_tracker % 2 == 0 ? '' : 'col-sm-push-6'; ?>" style="background-image: url(<?php echo $fifth['image']['sizes']['large'] ?>)"></div>
					<div class="fifty <?php echo $flip_tracker % 2 == 0 ? '' : 'col-sm-pull-6' ?>">
						<div class="table-wrap">
							<div class="table-cell">
								<div class="inner">
									<h2><?php echo $fifth['page_link']->post_title ?></h2>
									<div class="summary">
										<?php echo $fifth['blurb'] ?>
									</div>
									<a href="<?php echo get_the_permalink( $fifth['page_link']->ID ) ?>" class="button"><?php echo $fifth['button_text'] ?></a>
								</div>
							</div>
						</div>
					</div>
				</div>
		<?php 
				$flip_tracker++;
			endforeach; 
		?>
</div>
<?php 
		endif;
	endwhile;
endif; ?>

fifty-no-cta.

$red : #bb133e;

.fifty-container { @include clearfix(); 
	.table-wrap                { width: 100%; height: 100%; display:table; }
	.table-cell                { display: table-cell; vertical-align:middle; }

	.fifty { width: 100%; padding: 50px 30px; position: relative; height: 540px; background-color: #FFF;
		@media( min-width: $screen-sm-min ){ width: 50%; float: left; height: 640px; padding: 0px 50px; }
		@media( min-width: $screen-md-min ){ padding: 0px 100px; }
		@media( min-width: $screen-lg-min ){ padding: 0px 150px; }

		.inner { max-width: 100%; 
			@media( min-width: $screen-sm-min ){ max-width: 600px; }
		}
	}

	.half-image { width: 100%; height: 640px; @include bg-image;
		@media( min-width: $screen-sm-min ){ width: 50%; float: left; }
	}
}

fifty-with-cta.less

@red : #bb133e;

.fifty-container { .clearfix(); 
	.fifty { width: 100%; padding: 50px 30px; position: relative; height: 540px; background-color: #FFF;
	 	@media( min-width: @screen-sm-min ){ width: 50%; float: left; height: 640px; padding: 0px 50px; }
	 	@media( min-width: @screen-md-min ){ padding: 0px 100px; }
	 	@media( min-width: @screen-lg-min ){ padding: 0px 150px; }
		
		.inner { max-width: 100%; 
			@media( min-width: @screen-sm-min ){ max-width: 600px; }
		}

	 	.zig { margin-bottom: 25px; }
	}

	.half-image { width: 100%; height: 640px; 
		@media( min-width: @screen-sm-min ){ width: 50%; float: left; }
	}

	.cta { background-color: @red; text-align: center; padding: 60px 30px;
		h3, a { color: white; text-transform: uppercase; }
		h3 { max-width: 1075px; margin: 10px auto; }
		a { .prox-link; }
		img { padding-bottom: 4px; padding-left: 10px; }
	}
}

fifty-with-cta.php

<?php $fifty = get_field('fifty_fifty'); ?>
<div class="fifty-container">
	<?php if( !empty( $fifty ) ): $flip_tracker = 0; ?>
		<?php 
			foreach( $fifty as $fifth ): 
				$layout = $fifth['acf_fc_layout'];
				if( $layout == 'image_and_page_description' ):
		?>
				<div class="row">
					<div class="fifty half-image <?php echo $flip_tracker % 2 == 0 ? '' : 'col-sm-push-6'; ?>" style="background-image: url(<?php echo $fifth['image']['sizes']['large'] ?>)"></div>
					<div class="fifty <?php echo $flip_tracker % 2 == 0 ? '' : 'col-sm-pull-6' ?>">
						<div class="table-wrap">
							<div class="table-cell">
								<div class="inner">
									<h2><?php echo $fifth['page']->post_title ?></h2>
									<?php echo pk_get('zig-zag') ?>
									<div class="summary">
										<?php echo $fifth['page_summary'] ?>
									</div>
									<a href="<?php echo get_the_permalink( $fifth['page']->ID ) ?>" class="button"><?php echo $fifth['button_text'] ?></a>
								</div>
							</div>
						</div>
					</div>
				</div>
		<?php 
					$flip_tracker++;
				endif;

				if( $layout == 'call_to_action' ):
		?>
				<div class="row">
					<div class="cta">
						<h3><?php echo $fifth['message'] ?></h3>
						<a href="<?php echo $fifth['page_link'] ?>"><?php echo $fifth['link_text'] ?> <img src="<?php echo get_stylesheet_directory_uri() ?>/images/link-arrow.png"></a>
					</div>
				</div>
		<?php
				endif;
			endforeach; 
		?>
	<?php endif; ?>
</div>