Quick snippets for ACF Repeater

Code to display subfield of a repeater field in ACF

<?php if(get_field('slider_image')): ?>
	<?php while(has_sub_field('slider_image')): ?>
	<img src="<?php the_sub_field('image'); ?>" alt="" />
<?php endwhile; endif; ?>

Show only has subfield?

<?php while(has_sub_field('car_types')): ?>
<div class="col-sm-12">
	<div class="col-sm-6">
		<?php the_sub_field('name'); ?>
	</div>
	<div class="col-sm-6">
		<?php the_sub_field('price'); ?><br />
		<?php
			$name = get_sub_field('brochure_file');
			if (get_sub_field('brochure_file')) {
			?>
			<a href="<?php the_sub_field('brochure_file'); ?>">Download Brochure</a>
			<?php 
				} else {
				  echo '';
			}
		?>
	</div>
</div>
<?php endwhile; endif; ?>

Repeater on Option

<?php while(has_sub_field('top_banner', 'option')): ?>
				<div>
					<a href="<?php the_sub_field('link'); ?>" target="_blank">
						<img src="<?php the_sub_field('image'); ?>" /></a>
				</div>
			<?php endwhile; ?>

Custom Taxonomy list with Images using ACF

<div class="projCatWrapper">
	<div class="row">
		<?php 
		$tax = 'project_category';
		$terms = get_terms( $tax, $args = array(
			'hide_empty' => false, // do not hide empty terms
		));
		foreach( $terms as $term ) {
			$term_link = get_term_link( $term );
				$image = get_field('category_thumbnail',  'project_category_' . $term->term_id );
			if( $term->count > 0 ) {
				echo '<div class="col-sm-4 col-xs-12 projCol"><div class="projCatItem"><a href="' . esc_url( $term_link ) . '">';
				echo '<img src="' . $image['url'] . '" alt="' . $image['alt'] .'"><div class="projCatName"><span>';       
				echo $term->name .'</span></a></div></div></div>';
			} elseif( $term->count !== 0 ) {
				echo '' . $term->name .'';
			}
		}
		?>
	</div>
</div>

Simple Slide Up content on Hover

A simple css trick to make your thumbnail have a slide up effect on mouse hover.

HTML

<div class="col-md-4 box_industries">
<div>
<div class="image fill"><img src="http://lorempixel.com/g/400/200/" width="363" height="159" /></div>
<div class="content">
<h5>Title</h5>
This is my content

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

CSS

.box_industries {
background: green;
overflow: hidden;
text-align: center;
position: relative;
}

.box_industries .content
{
background: rgba( 0, 0, 0, 0.9 );
bottom: -100%;
color: #fff;
height: 100%;
left: 0%;
text-align: center;
position: absolute;
transition: bottom 0.5s ease;
width: 100%;
}
.box_industries:hover .content
{
bottom: 0%;
}