Advanced Custom Fields - thumbnails

Question

Using Advanced Custom Fields (ACF), I usually use the following code to display a specific field with a specific thumbnail size (using image ID):

$image = get_field('field_name_here'); 
$size = 'thumbnail_size_here'; 
if( $image ) { 
    echo wp_get_attachment_image( $image, $size );
}

However, when I tried to use this code in a repeater field, it just spits out numbers.

I have tried updating the above code to:

$image = the_sub_field('field_name_here'); 
$size = 'thumbnail_size_here'; 
if( $image ) { 
    echo wp_get_attachment_image( $image, $size );
}

However, this does not work, again it just spits out numbers. The full code would be like this:

<?php if(get_field('example_repeater_field')): ?>
    <ul>
        <?php while(has_sub_field('example_repeater_field')): ?>

        <li>
            <?php 
            $image = the_sub_field('field_name_here'); 
            $size = 'thumbnail_size_here'; 
            if( $image ) { 
                echo wp_get_attachment_image( $image, $size );
            } ?>
        </li>

       <?php endwhile; ?>
    </ul>
<?php endif; ?>

I have read the info on the ACF website but cannot see anything that related to custom thumbnail sizes.

Has anyone come across this before and found a solution?

Answer 1

I'm not a huge fan of while loops and multiples requests, so I usually prefer to get my data with only one request then loop through it with a foreach , like this :

<?php $fields = get_field('repeater_field'); ?>
<?php foreach ($fields as $field): ?>
    <?= $field['field_name']; ?>
<?php endforeach; ?>

Also, you could try to have the image field set to return the image object (instead of the id), and to display the image like this : (see the "Customized display (Object)" section)

<?php $image = get_field('image'); ?>
<?php echo $image['sizes']['thumbnailSize']; ?>

Which in your case would give us something like this (once you've set your acf field to return an object) :

<?php $fields = get_field('repeater_field'); ?>
<?php if( !empty($fields) ): ?>
    <ul>
        <?php foreach ($fields as $field): ?>
            <li><?= $field['field_name']['sizes']['thumbnail_size']; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Answer 2

I've got exactly this in a repeater field loop

<?php if(have_rows('column')):
while(have_rows('column')) : the_row(); ?>

    <?php   $image = get_sub_field('image');
    if( !empty($image) ):

    $url = $image['url'];
    $caption = $image['caption'];

    // thumbnail size (column) declared in functions.php
    $size = 'column';
    $thumb = $image['sizes'][ $size ]; ?>

    <?php endif; ?>


    <img src="<?php echo $thumb; ?>">

But this only works if your return value is set as "image array" in ACF