云策 WordPress 开发者社区

钩子文档

image_send_to_editor

查看官方原文 ↗
💡 云策文档标注

概述

image_send_to_editor 是一个 WordPress 过滤器，用于在插入图像到编辑器时修改其 HTML 标记。它允许开发者自定义图像标签的属性，如添加自定义数据属性或调整现有内容。

关键要点

  • 过滤器名称：image_send_to_editor，用于过滤发送到编辑器的图像 HTML 标记。
  • 参数：包括 $html（HTML 标记）、$id（附件 ID）、$caption（标题）、$title（标题）、$align（对齐方式）、$url（源 URL）、$size（尺寸）、$alt（替代文本）和 $rel（rel 属性）。
  • 用法：通过 add_filter 钩子调用，可以修改图像标签以添加自定义属性或调整输出。
  • 相关函数：get_image_send_to_editor() 用于检索图像 HTML。
  • 版本历史：从 WordPress 2.5.0 引入，5.6.0 版本添加了 $rel 参数。

代码示例

add_filter( 'image_send_to_editor', 'add_custom_data_attribute_send_to_editor', 10, 8 );
function add_custom_data_attribute_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ){  
    if( $id > 0 ){
        $post = get_post( $id );
        $media_data = array(
            $post->ID, // media id[0]
            $post->post_content, // media description
            $post->post_excerpt // media caption
        );
        $img_size = wp_get_attachment_image_src($id, 'full'); // get media full size url
        $data  = sprintf( ' data-media-description="%s"', esc_attr( $media_data[1] ) ); // set data-media-description
        $data .= sprintf( ' data-media-url="%s" ', esc_url( $img_size[0] ) ); // set data-media-url
        $html = str_replace( "<img", "<img" . $data, $html );
    }
    return $html;
}

注意事项

  • 确保正确处理所有参数，特别是 $id 和 $size，以避免错误。
  • 使用 esc_attr 和 esc_url 等函数来转义输出，确保安全性。
  • 注意 WordPress 版本兼容性，例如 $rel 参数在 5.6.0 及以上版本可用。
📄 原文内容

Filters the image HTML markup to send to the editor when inserting an image.

Parameters

$htmlstring
The image HTML markup to send.
$idint
The attachment ID.
$captionstring
The image caption.
$titlestring
The image title.
$alignstring
The image alignment.
$urlstring
The image source URL.
$sizestring|int[]
Requested image size. Can be any registered image size name, or an array of width and height values in pixels (in that order).
$altstring
The image alternative, or alt, text.
$relstring
The image rel attribute.

Source

$html = apply_filters( 'image_send_to_editor', $html, $id, $caption, $title, $align, $url, $size, $alt, $rel );

View all references View on Trac View on GitHub

Used by Description
get_image_send_to_editor()wp-admin/includes/media.php

Retrieves the image HTML to send to the editor.

Changelog

Version Description
5.6.0 The $rel parameter was added.
2.5.0 Introduced.

User Contributed Notes

  1. Skip to note 2 content


    Razon Komar Pal


    You must log in to vote on the helpfulness of this noteVote results for this note: 2You must log in to vote on the helpfulness of this note

    Add custom field to media attachment image attribute in post editor

    /**   
 * Add the data-media-description and data-media-full attributes to inserted image tag. 
 */
add_filter( 'image_send_to_editor', 'add_custom_data_attribute_send_to_editor', 10, 8 );
function add_custom_data_attribute_send_to_editor( $html, $id, $caption, $title, $align, $url, $size, $alt ){  
	if( $id > 0 ){
		$post = get_post( $id );
		$media_data = array(
			$post->ID, // media id[0]
			$post->post_content, // media description
			$post->post_excerpt // media caption
		);			
		$img_size = wp_get_attachment_image_src($id, 'full'); // get media full size url
		$data  = sprintf( ' data-media-description="%s"', esc_attr( $media_data[1] ) ); // set data-media-description
		$data .= sprintf( ' data-media-url="%s" ', esc_url( $img_size[0] ) ); // set data-media-url
		$html = str_replace( "<img src", "<img{$data}src", $html ); // replace and add custom attributes
	}
	return $html;
}