WordPress.org

Make WordPress Core

Changeset 35594


Ignore:
Timestamp:
11/10/2015 01:16:16 AM (3 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.