中继器中的ACF图像字段

Question

在HTML输出中将ACF Image字段从默认的全尺寸切换到缩略图时遇到了问题。

我有一个图像类型的子字段ID 'homepage_custom_navigation_image'在一个中继器字段ID 'homepage_custom_navigation'。如有任何建议，我将不胜感激。

这是我到目前为止的代码，它可以显示完整尺寸的图像，但使我的页面的下载时间相当长:

<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>

Answer 1

如果您想控制图像的大小，我可以向您展示我通常如何使用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>';
        }
    }
?>

这是假设'homepage_custom_navigation_title'， 'homepage_custom_navigation_link'和'homepage_custom_navigation_image'都是你的中继器中的子字段。关键是使用wp_get_attachment_image。这将使用WordPress函数，该函数根据参数中输入的ID和大小值创建图像。'Thumbnail'是WordPress的默认大小之一，但它们可以在你的functions.php文件中进行调整和自定义。

Answer 2

感谢大家的帮助和指导。我从你的每个建议中都得到了一些信息，并得出了这个答案:

<!-- 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>

Answer 3

试试这个:

<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; ?>

只要确保在"返回值"中你选择了"图像对象"，它应该工作(我已经为适当的HTML5添加了alt，如果你想的话，你甚至可以添加图像大小)