Question

我无法将ACF图像字段从默认的fullsize切换到HTML输出中的缩略图图像。

我有一个图片类型子字段ID＆＃39; homepage_custom_navigation_image＆＃39;在Repeater字段ID＆＃39; homepage_custom_navigation＆＃39;中。任何建议将不胜感激。

这是我到目前为止的代码，它显示的是完整图片，但是我的页面下载时间很长：

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

这假设＆＃39; homepage_custom_navigation_title＆＃39;，＆＃39; homepage_custom_navigation_link＆＃39;和＆＃39; homepage_custom_navigation_image＆＃39;是你的转发器中的所有子字段。关键是使用wp_get_attachment_image。这将使用WordPress函数，该函数根据参数中输入的ID和大小值创建图像。＆＃39;缩略图＆＃39;是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，如果需要，您甚至可以添加图像大小）

中继器中的ACF图像字段

3 个答案: