Fix header image filtering and YouTube header video detection #1208

westonruter · 2018-06-10T07:00:10Z

Make sure that any get_header_image_tag filters from theme get applied. Fixes quality issue in Twenty Seventeen. See twentyseventeen_header_image_tag().
Fix detection of YouTube short URLs, e.g. https://youtu.be/rpsmMYFtgiI vs. https://www.youtube.com/watch?v=rpsmMYFtgiI
Dequeue wp-custom-header instead of deregistering to prevent Query Monitor complaining about missing scripts.

Before 🚫

<div id="wp-custom-header" class="wp-custom-header">
    <amp-img 
        src="https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29.jpg"
        width="2000"
        height="1199"
        alt="WordPress Develop"
        srcset="
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29.jpg 2000w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-300x180.jpg 300w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-768x460.jpg 768w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-1024x614.jpg 1024w
        "
        sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"
    ></amp-img>
</div>

Notice the low resolution image:

After ✅

<div id="wp-custom-header" class="wp-custom-header">
    <amp-img
        src="https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29.jpg"
        width="2000"
        height="1199"
        alt="WordPress Develop"
        srcset="
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29.jpg 2000w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-300x180.jpg 300w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-768x460.jpg 768w, 
            https://src.wordpress-develop.test/wp-content/uploads/2018/06/cropped-hoodoo-ski-area-2016-12-29-1024x614.jpg 1024w
        " 
        sizes="100vw" 
        class="amp-wp-enforced-sizes"
        layout="intrinsic"
    ></amp-img>
</div>

Notice high resolution image:

* Make sure that any get_header_image_tag filters from theme get applied. Fixes quality issue in Twenty Seventeen. * Fix detection of YouTube short URLs. * Dequeue wp-custom-header instead of deregistering to prevent Query Monitor complaining.

kienstra

Approved

Hi @westonruter,
This PR looks good. It's nice how it accommodates URLs like https://youtu.be/v5zg_Yv048s.

Nice "before" and "after" images and markup. I also saw how this PR enables outputting the layout attribute on the header image.

kienstra · 2018-06-12T09:23:31Z

includes/class-amp-theme-support.php

@@ -369,7 +369,10 @@ public static function add_hooks() {
 		add_action( 'comment_form', array( __CLASS__, 'amend_comment_form' ), 100 );
 		remove_action( 'comment_form', 'wp_comment_form_unfiltered_html_nonce' );
 		add_filter( 'wp_kses_allowed_html', array( __CLASS__, 'whitelist_layout_in_wp_kses_allowed_html' ), 10 );
-		add_filter( 'get_header_image_tag', array( __CLASS__, 'conditionally_output_header' ), 10, 3 );
+		add_filter( 'get_header_image_tag', array( __CLASS__, 'amend_header_image_with_video_header' ), PHP_INT_MAX );


It's nice how this allows all other filters to run first.

kienstra · 2018-06-12T09:31:46Z

tests/test-class-amp-theme-support.php

@@ -1338,15 +1338,15 @@ public function test_whitelist_layout_in_wp_kses_allowed_html() {
 	/**
 	 * Test AMP_Theme_Support::conditionally_output_header().
 	 *
-	 * @see AMP_Theme_Support::conditionally_output_header()
+	 * @see AMP_Theme_Support::amend_header_image_with_video_header()
 	 */
 	public function conditionally_output_header() {


This is an error I made in a commit, but this method conditionally_output_header() should have been test_conditionally_output_header().

But with the method renamed, this method should probably be test_amend_header_image_with_video_header().

Thanks for noting that. Fixed in 97620b9.

kienstra · 2018-06-12T09:33:35Z

includes/class-amp-theme-support.php

-		$image_header = AMP_HTML_Utils::build_tag( 'amp-img', $atts );
+		$youtube_id = null;
+		if ( isset( $parsed_url['host'] ) && preg_match( '/(^|\.)(youtube\.com|youtu\.be)$/', $parsed_url['host'] ) ) {
+			if ( 'youtu.be' === $parsed_url['host'] && ! empty( $parsed_url['path'] ) ) {


It's nice how this accounts for URLs like https://youtu.be/v5zg_Yv048s

westonruter added this to the v1.0 milestone Jun 10, 2018

westonruter requested a review from kienstra June 10, 2018 07:00

westonruter force-pushed the fix/header-media branch from c01fabd to 4445c18 Compare June 10, 2018 07:15

kienstra approved these changes Jun 12, 2018

View reviewed changes

Fix test_amend_header_image_with_video_header

97620b9

westonruter merged commit a92f802 into develop Jun 12, 2018

westonruter deleted the fix/header-media branch June 12, 2018 15:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix header image filtering and YouTube header video detection #1208

Fix header image filtering and YouTube header video detection #1208

westonruter commented Jun 10, 2018

kienstra left a comment

kienstra Jun 12, 2018

kienstra Jun 12, 2018 •

edited

Loading

westonruter Jun 12, 2018

kienstra Jun 12, 2018

Fix header image filtering and YouTube header video detection #1208

Fix header image filtering and YouTube header video detection #1208

Conversation

westonruter commented Jun 10, 2018

Before 🚫

After ✅

kienstra left a comment

Choose a reason for hiding this comment

kienstra Jun 12, 2018

Choose a reason for hiding this comment

kienstra Jun 12, 2018 • edited Loading

Choose a reason for hiding this comment

westonruter Jun 12, 2018

Choose a reason for hiding this comment

kienstra Jun 12, 2018

Choose a reason for hiding this comment

kienstra Jun 12, 2018 •

edited

Loading