WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/27/2016 09:50:56 PM (4 years ago)
Author:
joemcgill
Message:

Themes: Enable video in custom headers.

This adds the ability for themes to add support for videos in custom headers
by passing 'video' => true as an argument when adding theme support for
custom headers.

Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.

This introduces several new functions:

has_header_video() – Check whether a header video is set or not.
get_header_video_url() – Retrieve header video URL for custom header.
the_header_video_url() – Display header video URL.
get_header_video_settings() – Retrieve header video settings.
has_custom_header() – Check whether a custom header is set or not.
get_custom_header_markup() – Retrieve the markup for a custom header.
the_custom_header_markup() – Print the markup for a custom header.

And a new file, wp-includes/js/wp-custom-header.js that handles loading videos
in custom headers.

This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.

Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes #38172.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r38948 r38985  
    363363        add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 );
    364364        add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_control_templates' ), 1 );
     365
     366        // Export header video settings with the partial response.
     367        add_filter( 'customize_render_partials_response', array( $this, 'export_header_video_settings' ), 10, 3 );
    365368
    366369        // Export the settings to JS via the _wpCustomizeSettings variable.
     
    32503253        /* Custom Header */
    32513254
     3255        if ( current_theme_supports( 'custom-header', 'video' ) ) {
     3256            $title = __( 'Header Visuals' );
     3257            $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
     3258            $width = absint( get_theme_support( 'custom-header', 'width' ) );
     3259            $height = absint( get_theme_support( 'custom-header', 'height' ) );
     3260            if ( $width && $height ) {
     3261                /* translators: %s: header size in pixels */
     3262                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ),
     3263                    sprintf( '<strong>%s &times; %s</strong>', $width, $height )
     3264                );
     3265            } elseif ( $width ) {
     3266                /* translators: %s: header width in pixels */
     3267                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ),
     3268                    sprintf( '<strong>%s</strong>', $width )
     3269                );
     3270            } else {
     3271                /* translators: %s: header height in pixels */
     3272                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ),
     3273                    sprintf( '<strong>%s</strong>', $height )
     3274                );
     3275            }
     3276        } else {
     3277            $title = __( 'Header Image' );
     3278            $description = '';
     3279            $control_description = '';
     3280        }
     3281
    32523282        $this->add_section( 'header_image', array(
    3253             'title'          => __( 'Header Image' ),
     3283            'title'          => $title,
     3284            'description'    => $description,
    32543285            'theme_supports' => 'custom-header',
    32553286            'priority'       => 60,
     3287        ) );
     3288
     3289        $this->add_setting( 'header_video', array(
     3290            'theme_supports'    => array( 'custom-header', 'video' ),
     3291            'transport'         => 'postMessage',
     3292            'sanitize_callback' => 'absint',
     3293            'validate_callback' => array( $this, '_validate_header_video' ),
     3294        ) );
     3295
     3296        $this->add_setting( 'external_header_video', array(
     3297            'theme_supports'    => array( 'custom-header', 'video' ),
     3298            'transport'         => 'postMessage',
     3299            'sanitize_callback' => 'esc_url',
     3300            'validate_callback' => array( $this, '_validate_external_header_video' ),
    32563301        ) );
    32573302
     
    32663311        ) ) );
    32673312
     3313        $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
     3314            'theme_supports' => array( 'custom-header', 'video' ),
     3315            'label'          => __( 'Header Video' ),
     3316            'description'    => $control_description,
     3317            'section'        => 'header_image',
     3318            'mime_type'      => 'video',
     3319        ) ) );
     3320
     3321        $this->add_control( 'external_header_video', array(
     3322            'theme_supports' => array( 'custom-header', 'video' ),
     3323            'type'           => 'url',
     3324            'description'    => __( 'Or, enter a YouTube or Vimeo URL:' ),
     3325            'section'        => 'header_image',
     3326        ) );
     3327
    32683328        $this->add_control( new WP_Customize_Header_Image_Control( $this ) );
     3329
     3330        $this->selective_refresh->add_partial( 'custom_header', array(
     3331            'selector'            => '#wp-custom-header',
     3332            'render_callback'     => 'the_custom_header_markup',
     3333            'settings'            => array( 'header_video', 'external_header_video', 'header_image' ), // The image is used as a video fallback here.
     3334            'container_inclusive' => true,
     3335        ) );
    32693336
    32703337        /* Custom Background */
     
    37063773
    37073774    /**
     3775     * Export header video settings to facilitate selective refresh.
     3776     *
     3777     * @since 4.7.0
     3778     *
     3779     * @param array $response Response.
     3780     * @param WP_Customize_Selective_Refresh $selective_refresh Selective refresh component.
     3781     * @param array $partials Array of partials.
     3782     * @return array
     3783     */
     3784    public function export_header_video_settings( $response, $selective_refresh, $partials ) {
     3785        if ( isset( $partials['header_video'] ) || isset( $partials['external_header_video'] ) ) {
     3786            $response['custom_header_settings'] = get_header_video_settings();
     3787        }
     3788
     3789        return $response;
     3790    }
     3791
     3792    /**
     3793     * Callback for validating the header_video value.
     3794     *
     3795     * Ensures that the selected video is less than 8MB and provides an error message.
     3796     *
     3797     * @since 4.7.0
     3798     *
     3799     * @param WP_Error $validity
     3800     * @param mixed $value
     3801     * @return mixed
     3802     */
     3803    public function _validate_header_video( $validity, $value ) {
     3804        $video = get_attached_file( absint( $value ) );
     3805        if ( $video ) {
     3806            $size = filesize( $video );
     3807            if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB.
     3808                $validity->add( 'size_too_large', __( 'This video file is too large to use as a header video. Try a shorter video or optimize the compression settings and re-upload a file that is less than 8MB. Or, upload your video to YouTube and link it with the option below.' ) );
     3809            }
     3810            if ( '.mp4' !== substr( $video, -4 ) && '.mov' !== substr( $video, -4 ) ) { // Check for .mp4 or .mov format, which (assuming h.264 encoding) are the only cross-browser-supported formats.
     3811                $validity->add( 'invalid_file_type', __( 'Only <code>.mp4</code> or <code>.mov</code> files may be used for header video. Please convert your video file and try again, or, upload your video to YouTube and link it with the option below.' ) );
     3812            }
     3813        }
     3814        return $validity;
     3815    }
     3816
     3817    /**
     3818     * Callback for validating the external_header_video value.
     3819     *
     3820     * Ensures that the provided URL is for YouTube or Vimeo.
     3821     *
     3822     * @since 4.7.0
     3823     *
     3824     * @param WP_Error $validity
     3825     * @param mixed $value
     3826     * @return mixed
     3827     */
     3828    public function _validate_external_header_video( $validity, $value ) {
     3829        $video = esc_url( $value );
     3830        if ( $video ) {
     3831            if ( ! preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video )
     3832                 && ! preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video ) ) {
     3833                $validity->add( 'invalid_url', __( 'Please enter a valid YouTube or Vimeo video URL.' ) );
     3834            }
     3835        }
     3836        return $validity;
     3837    }
     3838
     3839    /**
    37083840     * Callback for rendering the custom logo, used in the custom_logo partial.
    37093841     *
Note: See TracChangeset for help on using the changeset viewer.