WordPress.org
Get WordPress

Make WordPress Core

Ticket #38172: 38172.diff

File 38172.diff, 15.0 KB (added by celloexpressions, 10 years ago)

Add validation to prevent videos over 8MB from being used, add initial support to Twenty Seventeen (needs front end work).

  • src/wp-admin/css/customize-controls.css

     
    555555        display: block;
    556556        font-style: italic;
    557557        line-height: 18px;
     558        margin-top: 0;
    558559        margin-bottom: 5px;
    559560}
    560561

  • src/wp-content/themes/twentyfourteen/functions.php

     
    409409                $classes[] = 'group-blog';
    410410        }
    411411
    412         if ( get_header_image() ) {
     412        if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) {
    413413                $classes[] = 'header-image';
    414414        } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) {
    415415                $classes[] = 'masthead-fixed';

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

     
    3232
    3333<body <?php body_class(); ?>>
    3434<div id="page" class="hfeed site">
    35         <?php if ( get_header_image() ) : ?>
     35        <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?>
     36                <div id="site-header">
     37                        <?php the_header_video_tag(); ?>
     38                </div>
     39        <?php elseif ( get_header_image() ) : ?>
    3640        <div id="site-header">
    3741                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    3842                        <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' ) ); ?>">

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

     
    4040                'width'                  => 1260,
    4141                'height'                 => 240,
    4242                'flex-height'            => true,
     43                'video'                  => true,
    4344                'wp-head-callback'       => 'twentyfourteen_header_style',
    4445                'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    4546                'admin-preview-callback' => 'twentyfourteen_admin_header_image',

  • src/wp-content/themes/twentyfourteen/js/functions.js

     
    103103
    104104                        if ( body.is( '.header-image' ) ) {
    105105                                toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
    106                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
     106                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
    107107
    108108                                _window.on( 'scroll.twentyfourteen', function() {
    109109                                        if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
    … …  
    112112                                                body.removeClass( 'masthead-fixed' );
    113113                                        }
    114114                                } );
     115
     116                                // Update masthead offset after a selective refresh.
     117                                if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
     118                                        wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     119                                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
     120                                        } );
     121                                }
    115122                        }
    116123                }
    117124

  • src/wp-content/themes/twentyfourteen/style.css

     
    8888video {
    8989        display: inline-block;
    9090        max-width: 100%;
     91        height: auto;
    9192}
    9293
    9394html {
    … …  
    608609        max-width: 100%;
    609610}
    610611
     612#wp-custom-header-video video {
     613        margin-bottom: -8px;
     614}
     615
    611616p > embed,
    612617p > iframe,
    613618p > object,

  • src/wp-content/themes/twentyseventeen/components/header/header-image.php

     
    1111?>
    1212<div class="custom-header">
    1313        <?php
     14        the_custom_header();
    1415        $header_image = get_header_image();
    1516
    1617        // Check if Custom Header image has been added.

  • src/wp-content/themes/twentyseventeen/inc/custom-header.php

     
    2121                'width'              => 2000,
    2222                'height'             => 1200,
    2323                'flex-height'        => true,
     24                'video'              => true,
    2425                'wp-head-callback'   => 'twentyseventeen_header_style',
    2526        ) ) );
    2627

  • src/wp-content/themes/twentyseventeen/style.css

     
    26342634# Media
    26352635--------------------------------------------------------------*/
    26362636
    2637 img {
     2637img,
     2638video {
    26382639        height: auto; /* Make sure images are scaled correctly. */
    26392640        max-width: 100%; /* Adhere to container width. */
    26402641}

  • src/wp-includes/class-wp-customize-manager.php

     
    32233223
    32243224                /* Custom Header */
    32253225
     3226                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     3227                        $title = __( 'Header Visuals' );
     3228                        $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
     3229                        $width = absint( get_theme_support( 'custom-header', 'width' ) );
     3230                        $height = absint( get_theme_support( 'custom-header', 'height' ) );
     3231                        if ( $width && $height ) {
     3232                                /* translators: %s: header size in pixels */
     3233                                $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.' ),
     3234                                        sprintf( '<strong>%s &times; %s</strong>', $width, $height )
     3235                                );
     3236                        } elseif ( $width ) {
     3237                                /* translators: %s: header width in pixels */
     3238                                $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.' ),
     3239                                        sprintf( '<strong>%s</strong>', $width )
     3240                                );
     3241                        } else {
     3242                                /* translators: %s: header height in pixels */
     3243                                $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.' ),
     3244                                        sprintf( '<strong>%s</strong>', $height )
     3245                                );
     3246                        }
     3247                } else {
     3248                        $title = __( 'Header Image' );
     3249                        $description = '';
     3250                        $control_description = '';
     3251                }
     3252
    32263253                $this->add_section( 'header_image', array(
    3227                         'title'          => __( 'Header Image' ),
     3254                        'title'          => $title,
     3255                        'description'    => $description,
    32283256                        'theme_supports' => 'custom-header',
    32293257                        'priority'       => 60,
    32303258                ) );
    32313259
     3260                $this->add_setting( 'header_video', array(
     3261                        'theme_supports'    => array( 'custom-header', 'video' ),
     3262                        'transport'         => 'postMessage',
     3263                        'validate_callback' => array( $this, '_validate_header_video' ),
     3264                ) );
     3265
    32323266                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array(
    32333267                        'default'        => get_theme_support( 'custom-header', 'default-image' ),
    32343268                        'theme_supports' => 'custom-header',
    … …  
    32393273                        'theme_supports' => 'custom-header',
    32403274                ) ) );
    32413275
     3276                $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
     3277                        'theme_supports' => array( 'custom-header', 'video' ),
     3278                        'label'          => __( 'Header Video' ),
     3279                        'description'    => $control_description,
     3280                        'section'        => 'header_image',
     3281                        'mime_type'      => 'video',
     3282                ) ) );
     3283
    32423284                $this->add_control( new WP_Customize_Header_Image_Control( $this ) );
    32433285
     3286                $this->selective_refresh->add_partial( 'header_video', array(
     3287                        'selector' => '#wp-custom-header-video',
     3288                        'render_callback' => 'get_header_video_tag',
     3289                        'settings' => array( 'header_video', 'header_image' ), // The image is used as a video fallback here.
     3290                ) );
     3291
    32443292                /* Custom Background */
    32453293
    32463294                $this->add_section( 'background_image', array(
    … …  
    35953643        }
    35963644
    35973645        /**
     3646         * Callback for validating the header_video value.
     3647         *
     3648         * Ensures that the selected video is less than 8MB and provides an error message.
     3649         *
     3650         * @since 4.7.0
     3651         *
     3652         * @param string $color
     3653         * @return mixed
     3654         */
     3655        public function _validate_header_video( $validity, $value ) {
     3656                $video = get_attached_file( absint( $value ) );
     3657                if ( $video ) {
     3658                        $size = filesize( $video );
     3659                        if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB.
     3660                                $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.' ) );
     3661                        }
     3662                }
     3663                return $validity;
     3664        }
     3665
     3666        /**
    35983667         * Callback for rendering the custom logo, used in the custom_logo partial.
    35993668         *
    36003669         * This method exists because the partial object and context data are passed

  • src/wp-includes/customize/class-wp-customize-header-image-control.php

     
    166166                $height = absint( get_theme_support( 'custom-header', 'height' ) );
    167167                ?>
    168168                <div class="customize-control-content">
    169                         <p class="customizer-section-intro">
     169                        <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
     170                                echo '<span class="customize-control-title">' . $this->label . '</span>';
     171                        } ?>
     172                        <p class="customizer-section-intro customize-control-description">
    170173                                <?php
    171                                 if ( $width && $height ) {
     174                                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     175                                        _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
     176                                } elseif ( $width && $height ) {
    172177                                        /* translators: %s: header size in pixels */
    173178                                        printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ),
    174179                                                sprintf( '<strong>%s &times; %s</strong>', $width, $height )

  • src/wp-includes/theme.php

     
    12641264                'thumbnail_url' => '',
    12651265                'width'         => get_theme_support( 'custom-header', 'width' ),
    12661266                'height'        => get_theme_support( 'custom-header', 'height' ),
     1267                'video'         => get_theme_support( 'custom-header', 'video' ),
    12671268        );
    12681269        return (object) wp_parse_args( $data, $default );
    12691270}
    … …  
    13111312}
    13121313
    13131314/**
     1315 * Check whether a header video is set or not.
     1316 *
     1317 * @since 4.7.0
     1318 *
     1319 * @see get_header_video_url()
     1320 *
     1321 * @return bool Whether a header video is set or not.
     1322 */
     1323function has_header_video() {
     1324        return (bool) get_header_video_url();
     1325}
     1326
     1327/* Retrieve header video URL for custom header.
     1328*
     1329* @since 4.7.0
     1330*
     1331* @return string|false
     1332*/
     1333function get_header_video_url() {
     1334        $id = absint( get_theme_mod( 'header_video' ) );
     1335
     1336        if ( ! $id ) {
     1337                return false;
     1338        }
     1339
     1340        if ( $id ) {
     1341                // We have an attachment ID, need the full URL
     1342                $url = wp_get_attachment_url( $id );
     1343        }
     1344
     1345        return esc_url_raw( set_url_scheme( $url ) );
     1346}
     1347
     1348/**
     1349 * Create video tag markup for a custom header video.
     1350 *
     1351 * @since 4.7.0
     1352 *
     1353 * @param array $attr Optional. Additional attributes for the image tag. Can be used
     1354 *                              to override the default attributes. Default empty.
     1355 * @return string HTML image element markup or empty string on failure.
     1356 */
     1357function get_header_video_tag( $attr = array() ) {
     1358        $header = get_custom_header();
     1359        $video = get_header_video_url();
     1360        $image = get_header_image();
     1361
     1362        if ( empty( $video ) ) {
     1363                if ( is_customize_preview() ) { // If there was a video an it was removed, fall back to an image.
     1364                        if ( ! empty( $image ) ) {
     1365                                return get_header_image_tag();
     1366                        }
     1367                }
     1368                return '';
     1369        }
     1370
     1371        $width = absint( $header->width );
     1372        $height = absint( $header->height );
     1373
     1374        $attr = wp_parse_args(
     1375                $attr,
     1376                array(
     1377                        'src' => get_header_video_url(),
     1378                        'width' => $width,
     1379                        'height' => $height,
     1380                        'controls' => '',
     1381                        'autoplay' => '',
     1382                        'loop' => '',
     1383                        'muted' => '',
     1384                )
     1385        );
     1386
     1387        // Use the header image as poster attribute and video fallback.
     1388        if ( ! empty( $image ) ) {
     1389                $attr['poster'] = $header->url;
     1390                $content = get_header_image_tag();
     1391        } else {
     1392                $content = __( 'Your browser cannot play this video.' );
     1393        }
     1394
     1395        $attr = array_map( 'esc_attr', $attr );
     1396        $html = '<video';
     1397
     1398        foreach ( $attr as $name => $value ) {
     1399                $html .= ' ' . $name . '="' . $value . '"';
     1400        }
     1401
     1402        $html .= '>' . $content . '</video>';
     1403
     1404        /**
     1405         * Filters the markup of header videos.
     1406         *
     1407         * @since 4.7.0
     1408         *
     1409         * @param string $html   The HTML image tag markup being filtered.
     1410         * @param object $header The custom header object returned by 'get_custom_header()'.
     1411         * @param array  $attr   Array of the attributes for the image tag.
     1412         */
     1413        return apply_filters( 'get_header_video_tag', $html, $header, $attr );
     1414}
     1415
     1416/**
     1417 * Display the video markup for a custom header video.
     1418 *
     1419 * @since 4.7.0
     1420 *
     1421 * @param array $attr Optional. Attributes for the image markup. Default empty.
     1422 */
     1423function the_header_video_tag( $attr = array() ) {
     1424        echo '<div id="wp-custom-header-video">' . get_header_video_tag( $attr ) . '</div>';
     1425}
     1426
     1427/**
     1428 * Display header video URL.
     1429 *
     1430 * @since 4.7.0
     1431 */
     1432function the_header_video_url() {
     1433        $video = get_header_video_url();
     1434        if ( $video ) {
     1435                echo esc_url( $video );
     1436        }
     1437}
     1438
     1439/**
     1440 * Display the video and image markup for a custom header.
     1441 *
     1442 * @since 4.7.0
     1443 */
     1444function the_custom_header() {
     1445        $video = get_header_video_url();
     1446        $image = get_header_image();
     1447
     1448        if ( ! empty( $video ) ) {
     1449                the_header_video_tag();
     1450        } elseif ( is_customize_preview() ) {
     1451                echo '<div id="wp-custom-header-video"></div>';
     1452                if ( ! empty( $image ) ) {
     1453                        the_header_image_tag();
     1454                }
     1455        } elseif ( ! empty( $image ) ) {
     1456                the_header_image_tag();
     1457        }
     1458}
     1459
     1460/**
    13141461 * Retrieve background image for custom background.
    13151462 *
    13161463 * @since 3.0.0
    … …  
    17061853                                'wp-head-callback' => '',
    17071854                                'admin-head-callback' => '',
    17081855                                'admin-preview-callback' => '',
     1856                                'video' => false,
    17091857                        );
    17101858
    17111859                        $jit = isset( $args[0]['__jit'] );