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
