WordPress.org

Make WordPress Core


Ignore:
Timestamp:
11/10/15 01:16:16 (2 years ago)
Author:
azaozz
Message:

Responsive images: add template helper functions to generate the tag for a (responsive) header image that includes srcset and sizes attributes.

Props Otto42, joemcgill, DH-Shredder, azaozz.
Fixes #21389.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/theme.php

    r35294 r35594  
    995995 
    996996/** 
     997 * Create image markup for a custom header image. 
     998 * 
     999 * @since 4.4.0 
     1000 * 
     1001 * @param array $attr Optional. Attributes for the image markup. Default empty. 
     1002 * @return string HTML element or empty string on failure. 
     1003 */ 
     1004function get_header_image_tag( $attr = array() ) { 
     1005    $header = get_custom_header(); 
     1006 
     1007    if ( empty( $header->url ) ) { 
     1008        return ''; 
     1009    } 
     1010 
     1011    $width = absint( $header->width ); 
     1012    $height = absint( $header->height ); 
     1013 
     1014    $attr = wp_parse_args( 
     1015        $attr, 
     1016        array( 
     1017            'src' => $header->url, 
     1018            'width' => $width, 
     1019            'height' => $height, 
     1020            'alt' => get_bloginfo( 'name' ), 
     1021        ) 
     1022    ); 
     1023 
     1024    // Generate 'srcset' and 'sizes' if not already present. 
     1025    if ( empty( $attr['srcset'] ) && ! empty( $header->attachment_id ) ) { 
     1026        $image_meta = get_post_meta( $header->attachment_id, '_wp_attachment_metadata', true ); 
     1027        $size_array = array( $width, $height ); 
     1028 
     1029        if ( is_array( $image_meta ) ) { 
     1030            $srcset = wp_calculate_image_srcset( $header->url, $size_array, $image_meta, $header->attachment_id ); 
     1031            $sizes = wp_get_attachment_image_sizes( $size_array, $image_meta, $header->attachment_id, $header->url ); 
     1032 
     1033            if ( $srcset && ( $sizes || ! empty( $attr['sizes'] ) ) ) { 
     1034                $attr['srcset'] = $srcset; 
     1035 
     1036                if ( empty( $attr['sizes'] ) ) { 
     1037                    $attr['sizes'] = $sizes; 
     1038                } 
     1039            } 
     1040        } 
     1041    } 
     1042 
     1043    $attr = array_map( 'esc_attr', $attr ); 
     1044    $html = '<img'; 
     1045 
     1046    foreach ( $attr as $name => $value ) { 
     1047        $html .= ' ' . $name . '="' . $value . '"'; 
     1048    } 
     1049 
     1050    $html .= ' />'; 
     1051 
     1052    /** 
     1053     * Filter the markup of header images. 
     1054     * 
     1055     * @since 4.4.0 
     1056     * 
     1057     * @param string $html   The HTML markup being filtered. 
     1058     * @param object $header The custom header object returned by 'get_custom_header()' 
     1059     * @param array  $attr   An array of attributes for the image markup. 
     1060     */ 
     1061    return apply_filters( 'get_header_image_tag', $html, $header, $attr ); 
     1062} 
     1063 
     1064/** 
     1065 * Display the image markup for a custom header image. 
     1066 * 
     1067 * @since 4.4.0 
     1068 * 
     1069 * @param array $attr Optional. Attributes for the image markup. Default empty. 
     1070 */ 
     1071function the_header_image_tag( $attr = array() ) { 
     1072    echo get_header_image_tag( $attr ); 
     1073} 
     1074 
     1075/** 
    9971076 * Get random header image data from registered images in theme. 
    9981077 * 
Note: See TracChangeset for help on using the changeset viewer.