Unable to query an image repeater field properly

• rpk

• January 27, 2014 at 11:53 am

At the moment i try to get the picturefill js plugin going with acf as well as the repeater field. the latter i haven’t accomplished yet, in addition i don’t understand one or two aspects in general.

the example i got going with plain acf is:

photo: tm_img(field name) image (field type) => image object passed
job: tm_job (field name) text (field type)
mail: tm_email (field name) email (field type)

<section class="about-team">
<?php
	$args = array(
		'post_type' => 'team',
		'posts_per_page' => '-1'
	);
	$the_query = new WP_Query( $args );
?>
<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
	<article class="about-team-member">
		<?php $teamimage = get_field('tm_img'); ?>
		<span class="picture" data-picture data-alt="<?php echo $teamimage['alt']; ?>">
			<span data-src="<?php echo $teamimage['sizes']['bps3-small']; ?>"></span>
			<span data-src="<?php echo $teamimage['sizes']['bps2-small']; ?>"	data-media="(min-width: 430px)"></span>
			<span data-src="<?php echo $teamimage['sizes']['bps1-medium']; ?>"	data-media="(min-width: 550px)"></span>
			<span data-src="<?php echo $teamimage['sizes']['bps1-medium']; ?>"	data-media="(min-width: 800px)"></span>
			<noscript><img src="<?php echo $teamimage['sizes']['bps1-medium']; ?>" alt="<?php echo $teamimage['alt']; ?>"></noscript>
		</span>
		<div class="infobox">
			<h3 class="bran-bn about-team-mem"><?php the_title(); ?></h3>
			<p class="mus-li about-team-job"><?php the_field('tm_job'); ?></p>
			<a class="about-team-mail" href="mailto:<?php the_field('tm_email'); ?>"><?php the_field('tm_email'); ?></a>
		</div>
	</article>
<?php endwhile; ?>
	<?php wp_reset_postdata(); ?>
<?php else: ?>
	<p>DB error</p>
<?php endif; ?>
</section>

Basically each of the mentioned fields gets queried within the specific section and reseted in the end. var_dump($teamimage); also returns a proper overview of the queried image array. If i try the same with the repeater field things don’t go that flawless. the setup:

project description: pro_description (field name) text area (field type)
project services: pro_services (field name) repeater (field type)
service(repeater): pro_service_single (field name) text (field type )
project images: pro_images (field name) repeater (field type)
image (repeater): pro_impressions(field name) image (field type) => image object passed

the code is the following:

<article>
	<div class="project-content">
		<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
			<h3 class="mus-hi pro-single-head"><?php the_title(); ?></h3>
			<p><?php the_field( 'pro_description' ); ?></p>
			<h4 class="mus-hi pro-single-head">Unsere Arbeiten</h4>
			<?php if (get_field( 'pro_services' ) ): ?>
					<ul>
					<?php while ( has_sub_field( 'pro_services' ) ): ?>
						<li><?php the_sub_field( 'pro_service_single' ); ?></li>
					<?php endwhile; ?>
					</ul>
			<?php endif; ?>
			<div class="project-imgs">
			<?php if (get_field( 'pro_images' ) ): ?>
						<?php while ( has_sub_field( 'pro_images' ) ): ?>
						<?php $projectimages = the_sub_field('pro_impressions');
						var_dump($projectimages); ?>

							<span class="picture" data-picture data-alt="<?php echo $projectimages['alt']; ?>">
								<span data-src="<?php echo $projectimages['sizes']['bps3-small']; ?>"></span>
								<span data-src="<?php echo $projectimages['sizes']['bps2-small']; ?>"	data-media="(min-width: 430px)"></span>
								<span data-src="<?php echo $projectimages['sizes']['bps1-medium']; ?>"	data-media="(min-width: 550px)"></span>
								<span data-src="<?php echo $projectimages['sizes']['bps1-medium']; ?>"	data-media="(min-width: 800px)"></span>
								<noscript>
									<img src="<?php echo $projectimages['sizes']['bps1-medium']; ?>" alt="<?php echo $projectimages['alt']; ?>">
								</noscript>
							</span>
				<?php endwhile; ?>
			<?php endif; ?>
			</div>
		<?php endwhile; ?>
			<?php wp_reset_postdata(); ?>
		<?php endif; ?>
	</div>
</article>

the querying of the text repeater field works fine but querying the images doesn’t work – no images are shown. var_dump($projectimages); already shows less and different infos than the ones of my first code example. i guess the code how to query the image repeater field is wrong? :/

and on a side note is it necessary to call wp_reset_postdata(); after each repeater field query or is one reset at the end of the element enough like at the moment?

Best regards Ralf

• Elliot

• January 28, 2014 at 9:02 am

Hi @rpk

Thanks for the code. The issue may be as simple as changing:

$projectimages = the_sub_field('pro_impressions');

to

$projectimages = get_sub_field('pro_impressions');

Make sure all the field names are correct, and this should work just fine.

As for the wp_reset_postdata() function, this is a WP function only to be used after a custom WP_Query loop, not a repeater field loop.

Thanks
E

• rpk

• January 28, 2014 at 12:05 pm

Cool cool cool – thanks a lot!!! Works fine now! But your answer also brought up a bit of a dumb follow up question i suppose. I query two repeater fields in this example – one text and one image repeater field. Why do I have to use the_subfield on the text field:

<li><?php the_sub_field( 'pro_service_single' ); ?></li>

and get_sub_field on the image field?

<?php $projectimages = get_sub_field('pro_impressions'); ?>

Is it cuz the second query is about an image object which gets passed to an array and the first is just a plain query? Thanks again for the fast response and help. Best regards Ralf

• Elliot

• January 29, 2014 at 10:15 am

Hi @rpk

the_ will echo the value, and get_ will return the value.

Cheers
E