如何使用高级自定义字段更改 WordPress 中缩略图的大小？

Question

我只是想在我的高级自定义字段库中为background-image 使用中等大小的缩略图。我对 wordpress 相当陌生，并且从概念上理解我需要做什么，但是我无法找到正确的语法来实现为我的循环和图像创建的“add_image_size”函数。

这似乎应该有效，但是添加“中”和“大小”属性会禁止图像出现。 （当我剪掉$image_thumbnail时，请不要让图片按原样显示）

           <div class="container gallery-section">
                <?php foreach(get_field('gallery_image') as $gallery_image) { ?>
                <?php
                 $image = $gallery_image['gallery_picture'];
                 $image_thumbnail = $image['gallery_picture']['sizes']['medium'];
                ?>
                <div class="gallery-image">

                    <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
                </div>
                <?php } ?>
            </div>      

这是我的functions.php

if (function_exists('add_theme_support'))
{
    // Add Menu Support
    add_theme_support('menus');

    // Add Thumbnail Theme Support
    add_theme_support('post-thumbnails');
    add_image_size('large', 700, '', true); // Large Thumbnail
    add_image_size('medium', 250, '', true); // Medium Thumbnail
    add_image_size('small', 120, '', true); // Small Thumbnail
    add_image_size('custom-size', 700, 200, true); // Custom Thumbnail Size call using the_post_thumbnail('custom-size');

}

*****编辑*****

<div class="container gallery-section">
    <?php 
    $gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field
    foreach($gallery_field as $gallery_image) {
    $image = $gallery_image['gallery_picture']; // url for the image that you upload same sizes..
    $image_thumbnail = $image['sizes']['medium']; // url for the medium size
                        ?>
    <div class="gallery-image">
    <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
    </div>
    <?php } ?>
</div>

Answer 1

这个循环和从数组中获取结果有问题。

它应该是这样的：

<div class="container gallery-section">
    <?php 
    $gallery_field = get_field('gallery_image'); // the field name that you set for the gallery field
    //print_r($gallery_field); you can see the array structure.
    foreach($gallery_field as $gallery_image) {
        $image = $gallery_image['url']; // url for the image that you upload same sizes..
        $image_thumbnail = $gallery_image['sizes']['medium']; // url for the medium size
        ?>
        <div class="gallery-image">
            <a href="<?php echo $image; ?>" style="background-image:url('<?php echo $image_thumbnail; ?>');" class="fancybox" rel="gallery"></a>
        </div>
    <?php } ?>
</div>  

您还可以根据需要从设置->媒体中设置medium 和large 的大小。

我会把它分解成碎片以便你理解。

在 ACF 管理员中，您创建了一个新的画廊字段，并将他命名为 gallery_image。
现在在您使用的模板中获取此字段：

$gallery_field = get_field('gallery_image');

此字段返回您在某个页面中上传到此字段的所有图像的数组，发布。

数组如下所示：

Array
(
    [0] => Array
        (
            [id] => 199
            [alt] => 
            [title] => _YON7864
            [caption] => 
            [description] => 
            [mime_type] => image/jpeg
            [url] => http://localhost/dev/wp-content/uploads/2014/10/YON7864.jpg
            [width] => 1772
            [height] => 1177
            [sizes] => Array
                (
                    [thumbnail] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-150x150.jpg
                    [thumbnail-width] => 150
                    [thumbnail-height] => 150
                    [medium] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-250x166.jpg
                    [medium-width] => 250
                    [medium-height] => 166
                    [large] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x464.jpg
                    [large-width] => 700
                    [large-height] => 464
                    [small] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-120x79.jpg
                    [small-width] => 120
                    [small-height] => 79
                    [custom-size] => http://localhost/dev/wp-content/uploads/2014/10/YON7864-700x200.jpg
                    [custom-size-width] => 700
                    [custom-size-height] => 200
                )

        )
)

现在要获取所有图像，您在数组上运行一个循环。

foreach($gallery_field as $gallery_image) {
    //inside the loop
}

$image_gallery 现在是单个图像的数组，它在循环中运行。

在循环中，你会得到你想要的图片大小的 url 和一些 url。

要获取您上传的真实大小的图片的网址，您需要使用您在数组中看到的密钥['url']。

要获取其他图像尺寸的 url，您需要进入数组键 ['sizes']，然后选择像 ['medium'] 或 ['large'] 这样的尺寸

它应该是这样的。

foreach($gallery_field as $gallery_image) {
    // $gallery_image is our array for each image
    $image = $gallery_image['url']; // to get the url we need to use ['url']
    $image_thumbnail = $gallery_image['sizes']['medium']; // to get the medium size image url we need to use ['sizes']['medium']
}

Answer 2

我将图像 url 切换为 oject url 并使用此代码。

<?php while(have_rows('gallery_image')) { the_row(); ?>
<?php $image = get_sub_field('gallery_picture'); ?>
<div class="gallery-image">
    <a href="<?php echo $image['url']; ?>" style="background-image:url('<?php echo $image['sizes']['medium']; ?>');" class="fancybox" rel="gallery"></a>
</div>
<?php } ?>