如何获取图像标题并使用 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 是 srcset
、alt
属性和 class
名称,但不是 title
。我怎样才能同时获得 return 标题?
从评论看来,您似乎正试图从媒体库中添加的标题中获取图像标题and/or 设置图像在网站上显示时的标题属性。
您可以通过两种方式获取和设置图片标题:
- 将 ACF 字段更改为 return“图像数组” 而不是“图像 ID”(这似乎是您在第一个示例中尝试的内容在你的问题中)。
- 使用 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;
}
}
(注:这段代码未经测试,但大意是有的。)
参考资料
我正在使用高级自定义字段图像字段,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 是 srcset
、alt
属性和 class
名称,但不是 title
。我怎样才能同时获得 return 标题?
从评论看来,您似乎正试图从媒体库中添加的标题中获取图像标题and/or 设置图像在网站上显示时的标题属性。
您可以通过两种方式获取和设置图片标题:
- 将 ACF 字段更改为 return“图像数组” 而不是“图像 ID”(这似乎是您在第一个示例中尝试的内容在你的问题中)。
- 使用 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;
}
}
(注:这段代码未经测试,但大意是有的。)
参考资料