如何获取图像标题并使用 wp_get_attachment_image 和 ACF 图像字段设置标题属性?

How can I get an image title and set the title attribute using wp_get_attachment_image and ACF Image fields?

我正在使用高级自定义字段图像字段,return输入一个 ID。

文档说,当使用图像 ID 时,您使用 wp_get_attachment_image() 函数生成图像 HTML,但尽管遵循了建议,但我似乎无法获得标题,我不知道为什么。

我尝试过各种方法,包括以下内容:

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    $size = 'full'; // (thumbnail, medium, large, full or custom size)
    $title = $image['title'];
    
       if( $image ) {
          echo wp_get_attachment_image( $image, $size, $title );
       }
}

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    $size = 'full'; // (thumbnail, medium, large, full or custom size)
    $attachment_title = get_the_title($attach_id);
    
       if( $image ) {
          echo wp_get_attachment_image( $image, $size, $attachment_title );
       }
}

此 return 是 srcsetalt 属性和 class 名称,但不是 title。我怎样才能同时获得 return 标题?

从评论看来,您似乎正试图从媒体库中添加的标题中获取图像标题and/or 设置图像在网站上显示时的标题属性。

您可以通过两种方式获取和设置图片标题:

  1. 将 ACF 字段更改为 return“图像数组” 而不是“图像 ID”(这似乎是您在第一个示例中尝试的内容在你的问题中)。
  2. 使用 WP 函数获取 and/or 使用图像 ID 设置图像标题(这似乎是您在第二个示例中尝试的)。

我将在下面向您展示如何让两者同时工作:

1.从您的 ACF 字段中获取包含所有图像详细信息的“图像数组”

图像标题已 return 编入数组中,因此您无需使用其他函数即可使用 ID 查找图像详细信息(包括标题)。您还可以在代码中构建图像 HTML,以便您可以根据需要添加标题。

首先您需要更改 ACF 字段设置并选择“Image Array”作为“Return Format”。然后你可以使用下面的代码:

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    if( $image ){
        // 1. Get the values we need from the image array
        $url   = $image['url'];
        $alt   = $image['alt'];
        $title = $image['title'];        // <- the TITLE!
        $id    = $image['ID']; // We don't need it here, but this is how you get it
        $width = $image['width'];
        $height = $image['height'];

        // 2. If you want an image a particular size
        $size = "thumb"; // or whatever size you want
        $thumb_url = $image['sizes'][ $size ];
        // First make sure the size you want exists and if so, get the width & height
        if ($thumb_url){
            $url = $thumb_url; // set our url variable to this one url if it exists
            $width = $image['sizes'][ $size . '-width' ];
            $height = $image['sizes'][ $size . '-height' ];
        }
    
        // 3. Now build your image HTML
        $img_html = '<img src="'.$url.'" title = "'.$title.'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'">';

        // 4. do whatever you want with the image e.g. return it or display it
        echo $img_html;
    }
}

2。使用图片ID使用WP函数获取和设置图片详情(包括标题)

这种方式不改变ACF字段设置,但是需要使用多个WP函数来获取和设置图片的细节

请注意,根据文档,wp_get_attachment_image 没有为图像传递标题属性的选项...但是 如果您将标题传递给 wp_get_attachment_image 在 $attr 数组中,它似乎可以工作!(当然不能保证这将继续在较新版本的 WP 中工作)。

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image_id = get_field('wedding_image_1');
    if( $image_id ) {
        $size = 'full'; // or whatever size you want    
        $title = get_the_title( $image_id );  // 1. NOTE: use image ID here, you have no $attach_id!

        // 2. set up your attributes array to pass in the title
        $attr['title'] = $title;

        // 3. Take note of the parameters for this you were passing values in the wrong positions
       $img_html = wp_get_attachment_image( $image_id, $size, false, $attr);

        // 4. do whatever you want with the image e.g. return it or display it
        echo $img_html;
    }
}

(注:这段代码未经测试,但大意是有的。)

参考资料