Repeater documentation has perfect example…but it isn't working

• SKD

• March 6, 2017 at 12:58 pm

I’m trying to create an image slideshow by using the repeater field to create the thumbnails (which works perfectly), then using the example in the documentation to create the initial main image view by selecting the first row of the repeater. I think the documentation example must have had exactly this usage in mind:

<?php

$rows = get_field('repeater_field_name' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['sub_field_name' ]; // get the sub field value 

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" />

I copied that exactly, changing only the names of my field and subfield:

<?php

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value 

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" alt="why isn't this working?" />

(I added the alt tag value just to make sure I wasn’t viewing a cached version of the source.)

But it isn’t working. I have double- and triple-checked my field names; they’re correct. Can anyone explain what’s wrong?

• John Huebner

• March 6, 2017 at 11:50 pm

There does not appear to be anything wrong with the code.

Where is the field group/repeater located? On a post, options page, term, somewhere else?

Is your code inside “The Loop”?

• SKD

• March 7, 2017 at 1:13 am

The field group is inside the loop; it’s in a single template for a custom post type. It’s also inside an if/else statement that returns either a single photo or a gallery, if there is one. As I said, everything else is working (apparently) flawlessly.

This is the context:

<?php
if ( get_field('gallery')) { ?>

<div class="gallery">

<div id="imageview"> 

<?php

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value 

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" alt="why isn't this working?" />

</div> 

<div id="thumbnails">

<?php if( have_rows('gallery') ): ?>
<?php while ( have_rows('gallery') ) : the_row(); ?>
<a href="<?php the_sub_field('gallery_photo'); ?>"><img src="<?php the_sub_field('gallery_photo'); ?>" alt="" /></a>
<?php endwhile; ?>
<?php endif; ?>

</div>

</div>

<?php } else { ?>

<div class="listingPhoto">
<img src="<?php the_field('listing_photo'); ?>" />
</div>

<?php }
?>

…and this is what’s being returned:

<div class="gallery">

<div id="imageview"> 

<img src="" alt="why isn't this working?" />

</div> 

<div id="thumbnails">

<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh4.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh4.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh5.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh5.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh3.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh3.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh2.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh2.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh7.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh7.jpg" alt="" /></a>
<a href="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh6.jpg"><img src="http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh6.jpg" alt="" /></a>

</div>

</div>

The URL is http://stevedowty.com/sunshine/listings/518-crestview-drive/

• John Huebner

• March 8, 2017 at 5:34 am

What is the return value for the image field set to?

looking further down your code at the image field in the row loop you are doing

<img src="<?php the_sub_field('gallery_photo'); 

but for the first image you’re using

$image = wp_get_attachment_image_src( $first_row_image, 'full' );

Try

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
?>
<img src="<?php $first_row['gallery_photo' ]; ?>" alt="why isn't this working?" />

• SKD

• March 8, 2017 at 6:58 am

If you meant replace this entire block:

<?php

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );
// url = $image[0];
// width = $image[1];
// height = $image[2];
?>
<img src="<?php echo $image[0]; ?>" alt="why isn't this working?" />

with this:

<?php

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
?>
<img src="<?php $first_row['gallery_photo' ]; ?>" alt="is this working yet?" />

then…no, still not working. The return value of the field is set to URL, but it returns <img src="" alt="is this working yet?" />

• John Huebner

• March 8, 2017 at 7:14 am

The problem that I’m trying to point out is that you are using the same value in 2 different ways.

This assumes that the value returned is an id

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value

// Note
// $first_row_image = 123 (image ID)

$image = wp_get_attachment_image_src( $first_row_image, 'full' );

and this assumes that the value returned is a url

<?php if( have_rows('gallery') ): ?>
<?php while ( have_rows('gallery') ) : the_row(); ?>
<a href="<?php the_sub_field('gallery_photo'); ?>"><img src="<?php 
        the_sub_field('gallery_photo'); ?>" alt="" /></a>
<?php endwhile; ?>
<?php endif; ?>

when the same value should be returned in both places. If the second one is right then you should not need to get the image, but I could be wrong. What is this actually returning

$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value

// add this to find out
echo '$first_row_image = ',$first_row_image;

• SKD

• March 8, 2017 at 7:48 am

Your latest snippet returns this:

$first_row_image = http://stevedowty.com/sunshine/wp-content/uploads/2017/03/mh.jpg

So, this

<?php
$rows = get_field('gallery' ); // get all the rows
$first_row = $rows[0]; // get the first row
$first_row_image = $first_row['gallery_photo' ]; // get the sub field value
?>

<img src="<?php echo $first_row_image; ?>" />

Made the image show up. Unless I’ve done something wrong here that could have been configured better, I’m calling this one done.