中继器中的 ACF 图像字段

Question

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

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

这是我到目前为止的代码，它可以显示全尺寸图像，但使我的页面的下载时间很长：

<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，您甚至可以根据需要添加图像大小）