Changeset 56583

Timestamp:

09/14/2023 11:23:59 AM (20 months ago)

Author:

spacedmonkey

Message:

Bundled Theme: Implement the_header_image_tag function for enhanced compatibility for older core themes.

The the_header_image_tag function was introduced in WordPress 4.4 as part of [35594]. It is used in all themes created post WordPress 4.4 that supported header images. The function get_header_image_tag continues to get updated with new image features, like lazy loading, async decoding and fetch priority. To ensure our core themes maintain compatibility and benefit from these enhancements, a backward compatibility shim has been applied, integrating the the_header_image_tag function into the following core themes:

• Twenty Ten
• Twenty Eleven
• Twenty Twelve
• Twenty Fourteen
• Twenty Sixteen

This change ensures future compatibility and modern image features are applied for header images to these older themes.

Props spacedmonkey, flixos90, mukesh27.
Fixes #58675.

Location:

trunk/src/wp-content/themes

Files:

• twentyeleven/functions.php (modified) (1 diff)
• twentyeleven/header.php (modified) (1 diff)
• twentyfourteen/header.php (modified) (1 diff)
• twentyfourteen/inc/custom-header.php (modified) (1 diff)
• twentysixteen/header.php (modified) (1 diff)
• twentyten/functions.php (modified) (1 diff)
• twentyten/header.php (modified) (1 diff)
• twentytwelve/header.php (modified) (1 diff)
• twentytwelve/inc/custom-header.php (modified) (1 diff)

trunk/src/wp-content/themes/twentyeleven/functions.php

@@ -441 +441 @@
 endif; // twentyeleven_admin_header_image()
 
+
+if ( ! function_exists( 'twentyeleven_header_image' ) ) :
+    /**
+     * Custom header image markup displayed.
+     *
+     * @since Twenty Eleven 4.5
+     */
+    function twentyeleven_header_image() {
+        $attrs = array(
+            'alt' => get_bloginfo( 'name', 'display' ),
+        );
+
+        // Compatibility with versions of WordPress prior to 3.4.
+        if ( function_exists( 'get_custom_header' ) ) {
+            $custom_header   = get_custom_header();
+            $attrs['width']  = $custom_header->width;
+            $attrs['height'] = $custom_header->height;
+        } else {
+            $attrs['width']  = HEADER_IMAGE_WIDTH;
+            $attrs['height'] = HEADER_IMAGE_HEIGHT;
+        }
+
+        if ( function_exists( 'the_header_image_tag' ) ) {
+            the_header_image_tag( $attrs );
+            return;
+        }
+
+        ?>
+        <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+        <?php
+    }
+endif; // twentyeleven_header_image()
+
 /**
  * Set the post excerpt length to 40 words.

trunk/src/wp-content/themes/twentyeleven/header.php

@@ -112 +112 @@
                     echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                 } else {
-                    // Compatibility with versions of WordPress prior to 3.4.
-                    if ( function_exists( 'get_custom_header' ) ) {
-                        $header_image_width  = get_custom_header()->width;
-                        $header_image_height = get_custom_header()->height;
-                    } else {
-                        $header_image_width  = HEADER_IMAGE_WIDTH;
-                        $header_image_height = HEADER_IMAGE_HEIGHT;
-                    }
-                    ?>
-                    <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
-                    <?php
+                    twentyeleven_header_image();
                 } // End check for featured image or standard header.
                 ?>

trunk/src/wp-content/themes/twentyfourteen/header.php

@@ -37 +37 @@
     <div id="site-header">
         <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-            <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
+            <?php twentyfourteen_header_image(); ?>
         </a>
     </div>

trunk/src/wp-content/themes/twentyfourteen/inc/custom-header.php

@@ -152 +152 @@
     }
 endif; // twentyfourteen_admin_header_image()
+
+
+if ( ! function_exists( 'twentyfourteen_header_image' ) ) :
+    /**
+     * Create the custom header image markup displayed.
+     *
+     * @see twentyfourteen_custom_header_setup()
+     *
+     * @since Twenty Fourteen 3.8
+     */
+    function twentyfourteen_header_image() {
+        $custom_header = get_custom_header();
+        $attrs         = array(
+            'alt'    => get_bloginfo( 'name', 'display' ),
+            'height' => $custom_header->height,
+            'width'  => $custom_header->width,
+        );
+        if ( function_exists( 'the_header_image_tag' ) ) {
+            the_header_image_tag( $attrs );
+            return;
+        }
+        ?>
+        <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+        <?php
+    }
+endif; // twentyfourteen_header_image()

trunk/src/wp-content/themes/twentysixteen/header.php

@@ -103 +103 @@
                 <div class="header-image">
                     <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
-                        <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
+                        <?php
+                        $custom_header = get_custom_header();
+                        $attrs         = array(
+                            'alt'    => get_bloginfo( 'name', 'display' ),
+                            'sizes'  => $custom_header_sizes,
+                            'height' => $custom_header->height,
+                            'width'  => $custom_header->width,
+                        );
+
+                        the_header_image_tag( $attrs );
+                        ?>
                     </a>
                 </div><!-- .header-image -->

trunk/src/wp-content/themes/twentyten/functions.php

@@ -291 +291 @@
 endif;
 
+
+if ( ! function_exists( 'twentyten_header_image' ) ) :
+    /**
+     * Custom header image markup displayed.
+     *
+     * @since Twenty Ten 4.0
+     */
+    function twentyten_header_image() {
+        $attrs = array(
+            'alt' => get_bloginfo( 'name', 'display' ),
+        );
+
+        // Compatibility with versions of WordPress prior to 3.4.
+        if ( function_exists( 'get_custom_header' ) ) {
+            $custom_header   = get_custom_header();
+            $attrs['width']  = $custom_header->width;
+            $attrs['height'] = $custom_header->height;
+        } else {
+            $attrs['width']  = HEADER_IMAGE_WIDTH;
+            $attrs['height'] = HEADER_IMAGE_HEIGHT;
+        }
+
+        if ( function_exists( 'the_header_image_tag' ) ) {
+            the_header_image_tag( $attrs );
+            return;
+        }
+
+        ?>
+        <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+        <?php
+    }
+endif; // twentyten_header_image()
+
 /**
  * Show a home link for our wp_nav_menu() fallback, wp_page_menu().

trunk/src/wp-content/themes/twentyten/header.php

@@ -96 +96 @@
                     echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                 } else {
-                    // Compatibility with versions of WordPress prior to 3.4.
-                    if ( function_exists( 'get_custom_header' ) ) {
-                        $header_image_width  = get_custom_header()->width;
-                        $header_image_height = get_custom_header()->height;
-                    } else {
-                        $header_image_width  = HEADER_IMAGE_WIDTH;
-                        $header_image_height = HEADER_IMAGE_HEIGHT;
-                    }
-                    ?>
-                    <img src="<?php header_image(); ?>" width="<?php echo esc_attr( $header_image_width ); ?>" height="<?php echo esc_attr( $header_image_height ); ?>" alt="" />
-                    <?php
+                    twentyten_header_image();
                 } // End check for featured image or standard header.
                 ?>

trunk/src/wp-content/themes/twentytwelve/header.php

@@ -55 +55 @@
 
         <?php if ( get_header_image() ) : ?>
-        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
+        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php twentytwelve_header_image(); ?></a>
         <?php endif; ?>
     </header><!-- #masthead -->

trunk/src/wp-content/themes/twentytwelve/inc/custom-header.php

@@ -167 +167 @@
     <?php
 }
+
+
+/**
+ * Output markup to be displayed.
+ *
+ * @since Twenty Twelve 4.1
+ */
+function twentytwelve_header_image() {
+    $custom_header = get_custom_header();
+    $attrs         = array(
+        'alt'    => get_bloginfo( 'name', 'display' ),
+        'class'  => 'header-image',
+        'height' => $custom_header->height,
+        'width'  => $custom_header->width,
+    );
+
+    if ( function_exists( 'the_header_image_tag' ) ) {
+        the_header_image_tag( $attrs );
+        return;
+    }
+    ?>
+    <img src="<?php header_image(); ?>" class="<?php echo esc_attr( $attrs['class'] ); ?>" width="<?php echo esc_attr( $attrs['width'] ); ?>" height="<?php echo esc_attr( $attrs['height'] ); ?>" alt="<?php echo esc_attr( $attrs['alt'] ); ?>" />
+    <?php
+}