ACF Image field in Repeater

0
votes

I'm having trouble switching an ACF Image field from the default fullsize to the thumbnail image in the HTML output.

I have an Image type sub-field ID 'homepage_custom_navigation_image' within a Repeater field ID 'homepage_custom_navigation'. Any advice will be greatly appreciated.

Here's the code I have so far, which is displaying the fullsize image OK but making the download time of my page pretty long:

<div id="homepage-navigation-container">

    <?php 
        $rows = get_field('homepage_custom_navigation');
        if($rows)
        {
            foreach($rows as $row)
            {
                echo '<div class="homepage-navigation-item">

                            <div class="homepage-navigation-item-image">
                                <a href=' . $row['homepage_custom_navigation_link'] . '><img src=' . $row['homepage_custom_navigation_image'] . ' alt=' . $row['homepage_custom_navigation_title'] . '></a>
                            </div>
                            <div class="homepage-navigation-item-title">
                                <a href=' . $row['homepage_custom_navigation_link'] . '><h2>' . $row['homepage_custom_navigation_title'] . '</h2></a>                                                   
                            </div>

                    </div>';
            }
        }
    ?>
</div>
3
wordpressrepeateradvanced-custom-fields
Have you look at the example codes on ACF? – Aibrean
Make sure you choose "Image Array" as the return type in the field settings for the image field. Then you should have access to an array of image sizes in the repeater. As stated above, view the examples. – codescribblr

3 Answers

0
votes

If you'd like to control the size of an image, I can show you how I normally output them using ACF.

<div id="homepage-navigation-container">

<?php 
    if(get_field('homepage_custom_navigation'))
    {
        while(has_sub_field){

        }
        foreach($rows as $row)
        {
            echo '<div class="homepage-navigation-item">
                        <div class="homepage-navigation-item-image">
                            <a href=' . get_sub_field('homepage_custom_navigation_link'). '>'. wp_get_attachment_image(get_sub_field('homepage_custom_navigation_image'), 'thumbnail'). '</a></div>
                        <div class="homepage-navigation-item-title">
                            <a href=' . get_sub_field('homepage_custom_navigation_link') . '><h2>' . get_sub_field('homepage_custom_navigation_title') . '</h2></a>                                                   
                        </div>

                </div>';
        }
    }
?>

This is assuming that 'homepage_custom_navigation_title', 'homepage_custom_navigation_link', and 'homepage_custom_navigation_image' are all subfields within your repeater. The key is to using wp_get_attachment_image. This will use the WordPress function, that creates an image based on the ID and size value input in the parameters. 'Thumbnail' is one of the WordPress default sizes though they can be tweaked and customized in your functions.php file.

0
votes

Thanks everyone for your help a guidance. I took a bit of info from each of your suggestions and came up with this as an answer:

<!-- Homepage custom navigation here -->                            
<div id="homepage-navigation-container">

    <?php if( have_rows('homepage_custom_navigation') ): ?>

        <?php while( have_rows('homepage_custom_navigation') ): the_row(); 

            // vars
            $thumb = wp_get_attachment_image_src(get_sub_field('homepage_custom_navigation_image'), 'thumbnail');
            $desc = get_sub_field('homepage_custom_navigation_title');
            $link = get_sub_field('homepage_custom_navigation_link');
            ?>

            <div class="homepage-navigation-item">
                <div class="homepage-navigation-item-image" style="background-image: url(<?php echo $thumb[0]; ?>); background-size: 120px auto; background-repeat: no-repeat; ">
                    <a href="<?php echo $link; ?>"> </a>
                </div>
                <div class="homepage-navigation-item-title">
                    <a href="<?php echo $link; ?>"><h2><?php echo $desc;?></h2></a>                                                   
                </div>
            </div>

        <?php endwhile; ?>

    <?php endif; ?>

</div>
-1
votes

Try this:

<div id="homepage-navigation-container">
    <?php if( have_rows('homepage_custom_navigation') ): ?>

        <?php while( have_rows('homepage_custom_navigation') ): the_row(); 

            // vars
            $gal = get_sub_field('homepage_custom_navigation_image');
            $desc = get_sub_field('homepage_custom_navigation_title');
            $url = $gal['url'];
            $title = $gal['title'];
            $alt = $gal['alt'];
            $size = 'thumbnail';
            $thumb = $gal['sizes'][ $size ];
            ?>


            <div class="homepage-navigation-item">
                    <div class="homepage-navigation-item-image">
                        <a href="<?php echo $url; ?>"><img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" /></a></div>
                    <div class="homepage-navigation-item-title">
                        <a href="<?php echo $url; ?>"><?php echo $desc;?></h2></a>                                                   
                    </div>

            </div>


        <?php endwhile; ?>

    <?php endif; ?>

Just make sure that in "Return Value" you have selected "Image Object" and it should work (I have added alt for proper HTML5 and you can even add the image size if you want)