WordPress.org

Make WordPress Core

Ticket #17242: 17242-first-pass.diff

File 17242-first-pass.diff, 19.1 KB (added by lancewillett, 6 years ago)
  • wp-content/themes/twentyeleven/style.css

     
    489489        margin: 0 0 4em; 
    490490} 
    491491#branding img { 
    492         height: auto; 
    493492        margin-bottom: -7px; 
    494         width: 100%; 
    495493} 
    496494 
    497495 
  • wp-content/themes/twentyeleven/header.php

     
    9191                                                // Houston, we have a new header image! 
    9292                                                echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' ); 
    9393                                        else : ?> 
    94                                         <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" /> 
     94                                        <img src="<?php header_image(); ?>" alt="" /> 
    9595                                <?php endif; // end check for featured image or standard header ?> 
    9696                        </a> 
    9797                        <?php endif; // end check for removed header image ?> 
  • wp-content/themes/twentyeleven/functions.php

     
    122122        define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyeleven_header_image_width', 1000 ) ); 
    123123        define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 300 ) ); 
    124124 
     125        /** 
     126         * Add support for flexible header image height 
     127         * 
     128         * For v1 of this feature setting we don't allow setting the max dimensions to something other than HEADER_IMAGE_WIDTH and HEADER_IMAGE_HEIGHT 
     129         * For Twenty Eleven the upload width is not flexible, but the height is flexible 
     130        */ 
     131        add_theme_support( 'flexible_header_image_upload', false, true );  
     132 
    125133        // We'll be using post thumbnails for custom header images on posts and pages. 
    126134        // We want them to be 940 pixels wide by 198 pixels tall. 
    127135        // Larger images will be auto-cropped to fit, smaller ones will be ignored. See header.php. 
  • wp-admin/custom-header.php

     
    288288        } 
    289289 
    290290        /** 
     291         * Get the allowed header image size (width, height) as defined by the theme. 
     292         * 
     293         * If enabled, flexible upload dimensions will override legacy HEADER_IMAGE_WIDTH and HEADER_IMAGE_HEIGHT definitions. 
     294         * 
     295         * @since 3.2 
     296         * 
     297         * @param string Dimension value to return. 
     298         * @return array 
     299         */ 
     300        function get_allowed_header_size( $dimension = '' ) { 
     301                $size = array( 
     302                        'width' => ( defined( 'HEADER_IMAGE_WIDTH' ) ) ? HEADER_IMAGE_WIDTH : 0, 
     303                        'height' => ( defined( 'HEADER_IMAGE_HEIGHT' ) ) ? HEADER_IMAGE_HEIGHT : 0 
     304                ); 
     305 
     306                // todo enable this once ints are allowed as arguments 
     307                // $flex_dimensions = get_theme_support( 'flexible_header_image_upload' ); 
     308                // if ( isset( $flex_dimensions[0] ) && false !== $flex_dimensions[0] ) 
     309                //      $size['width'] = $flex_dimensions[0]; 
     310                // if ( isset( $flex_dimensions[1] ) && false !== $flex_dimensions[1] ) 
     311                //      $size['height'] = $flex_dimensions[1]; 
     312 
     313                if ( ! empty( $dimension ) && isset( $size[$dimension] ) ) 
     314                        return $size[$dimension]; 
     315 
     316                return $size; 
     317        } 
     318 
     319        /** 
     320         * Set the parameters used for JS crop tool. 
     321         * JS reference: http://odyniec.net/projects/imgareaselect/usage.html 
     322         * 
     323         * @since 3.2 
     324         * 
     325         * @param string Param value to return. 
     326         * @return array 
     327         */ 
     328        function get_crop_params( $param = '' ) { 
     329                $params = array( 
     330                        'use_aspect_ratio' => false, 
     331                        'min_width' => 0, 
     332                        'max_width' => 0, 
     333                        'min_height' => 0, 
     334                        'max_height' => 0 
     335                ); 
     336 
     337                if ( ! current_theme_supports( 'flexible_header_image_upload' ) ) { 
     338                        // No special params needed. Proceed with normal crop, and for backcompat. 
     339                        $params['use_aspect_ratio'] = true; 
     340                        $params['max_height'] = $this->get_allowed_header_size( 'height' ); 
     341                        $params['max_width'] = $this->get_allowed_header_size( 'width' ); 
     342                } else { 
     343                        $args = get_theme_support( 'flexible_header_image_upload' ); 
     344                        $is_flexible_width = $args[0]; 
     345                        $is_flexible_height = $args[1]; 
     346 
     347                        // Set the crop width parameters. 
     348                        if ( false !== $is_flexible_width ) { 
     349                                // Theme says "allow anything up to my header size." No minimum width needed. 
     350                                $params['max_width'] = $this->get_allowed_header_size( 'width' ); 
     351                        } else { 
     352                                // Theme says "no flexible width for this header." Min and max values should be the same. 
     353                                $params['min_width'] = $this->get_allowed_header_size( 'width' ); 
     354                                $params['max_width'] = $this->get_allowed_header_size( 'width' ); 
     355                        } 
     356 
     357                        // Set the crop height parameters. 
     358                        if ( false !== $is_flexible_height ) { 
     359                                // Theme says "allow anything up to my header size." No minimum height needed. 
     360                                $params['max_height'] = $this->get_allowed_header_size( 'height' ); 
     361                        } else { 
     362                                // Theme says "no flexible height for this header." Min and max values should be the same. 
     363                                $params['min_height'] = $this->get_allowed_header_size( 'height' ); 
     364                                $params['max_height'] = $this->get_allowed_header_size( 'height' ); 
     365                        } 
     366                } 
     367 
     368                if ( ! empty( $param ) && isset( $params[$param] ) ) 
     369                        return $params[$param]; 
     370 
     371                return $params; 
     372        } 
     373 
     374        /** 
     375         * Set the crop type based on the uploaded image size versus allowed size. 
     376         * 
     377         * @since 3.2 
     378         * 
     379         * @param string $width Width of uploaded image. 
     380         * @param string $height Height of uploaded image. 
     381         * @return string $crop_type Type of action to take when cropping the image. 
     382         */ 
     383        function get_crop_type( $width = 0, $height = 0 ) { 
     384                $allowed_width = $this->get_allowed_header_size( 'width' ); 
     385                $allowed_height = $this->get_allowed_header_size( 'height' ); 
     386 
     387                // First, let's check if the image needs cropping. If not, exit. 
     388                if ( $width == $allowed_width && $height == $allowed_height ) 
     389                        return 'nocrop'; 
     390 
     391                if ( ! current_theme_supports( 'flexible_header_image_upload' ) ) { 
     392                        // Default crop, backcompat friendly. Height crop was not a previous feature. 
     393                        return 'crop_to_width'; 
     394                } else { 
     395                        // We have flexibility on our hands. 
     396                        $args = get_theme_support( 'flexible_header_image_upload' ); 
     397                        $is_flexible_width = ( false !== $args[0] ) ? true : false; 
     398                        $is_flexible_height = ( false !== $args[1] ) ? true : false; 
     399 
     400                        // If uploaded size is larger than allowed, let's force it to fit. 
     401                        if ( $width > $allowed_width ) 
     402                                $is_flexible_width = false; 
     403                        if ( $height > $allowed_height ) 
     404                                $is_flexible_height = false; 
     405 
     406                        // If uploaded size is smaller than allowed, let's let it upload as is. 
     407                        if ( $width <= $allowed_width ) 
     408                                $is_flexible_width = true; 
     409                        if ( $height <= $allowed_height ) 
     410                                $is_flexible_height = true; 
     411 
     412                        if ( $is_flexible_width && $is_flexible_height ) 
     413                                return 'nocrop'; 
     414 
     415                        if ( $width > $allowed_width ) 
     416                                return 'crop_to_width'; 
     417                        elseif ( $height > $allowed_height ) 
     418                                return 'crop_to_height'; 
     419                } 
     420 
     421                return 'nocrop'; 
     422        } 
     423 
     424        /** 
    291425         * Execute Javascript depending on step. 
    292426         * 
    293427         * @since 2.1.0 
     
    356490 
    357491                jQuery('#defaultcolor').click(function() { 
    358492                        pickColor(default_color); 
    359                         jQuery('#text-color').val(default_color) 
     493                        jQuery('#text-color').val(default_color); 
    360494                }); 
    361495 
    362496                jQuery('#text-color').keyup(function() { 
     
    395529        /** 
    396530         * Display Javascript based on Step 2. 
    397531         * 
     532         * @uses get_crop_params() to get custom crop parameters. 
    398533         * @since 2.6.0 
    399534         */ 
    400         function js_2() { ?> 
     535        function js_2() { 
     536 
     537                // Set crop params 
     538                $aspect_ratio = ( false !== $this->get_crop_params( 'use_aspect_ratio' ) ? "aspectRatio: xinit + ':' + yinit," : '' ); 
     539                $min_height = ( 0 != $this->get_crop_params( 'min_height' ) ? 'minHeight: ' . $this->get_crop_params( 'min_height' ) . ',' : '' ); 
     540                $max_height = ( 0 != $this->get_crop_params( 'max_height' ) ? 'maxHeight: ' . $this->get_crop_params( 'max_height' ) . ',' : '' ); 
     541                $min_width = ( 0 != $this->get_crop_params( 'min_width' ) ? 'minWidth: ' . $this->get_crop_params( 'min_width' ) . ',' : '' ); 
     542                $max_width = ( 0 != $this->get_crop_params( 'max_width' ) ? 'maxWidth: ' . $this->get_crop_params( 'max_width' ) . ',' : '' ); 
     543?> 
    401544<script type="text/javascript"> 
    402545/* <![CDATA[ */ 
    403546        function onEndCrop( coords ) { 
     
    408551        } 
    409552 
    410553        jQuery(document).ready(function() { 
    411                 var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>; 
    412                 var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>; 
     554                var xinit = <?php echo $this->get_allowed_header_size( 'width' ); ?>; 
     555                var yinit = <?php echo $this->get_allowed_header_size( 'height' ); ?>; 
    413556                var ratio = xinit / yinit; 
    414557                var ximg = jQuery('img#upload').width(); 
    415558                var yimg = jQuery('img#upload').height(); 
     
    427570                jQuery('img#upload').imgAreaSelect({ 
    428571                        handles: true, 
    429572                        keys: true, 
    430                         aspectRatio: xinit + ':' + yinit, 
     573                        <?php echo $aspect_ratio; ?> 
    431574                        show: true, 
    432575                        x1: 0, 
    433576                        y1: 0, 
    434577                        x2: xinit, 
    435578                        y2: yinit, 
    436                         maxHeight: <?php echo HEADER_IMAGE_HEIGHT; ?>, 
    437                         maxWidth: <?php echo HEADER_IMAGE_WIDTH; ?>, 
     579                        <?php echo $min_height; ?> 
     580                        <?php echo $max_height; ?> 
     581                        <?php echo $min_width; ?> 
     582                        <?php echo $max_width; ?> 
    438583                        onInit: function () { 
    439584                                jQuery('#width').val(xinit); 
    440585                                jQuery('#height').val(yinit); 
     
    479624<th scope="row"><?php _e( 'Preview' ); ?></th> 
    480625<td > 
    481626        <?php if ( $this->admin_image_div_callback ) { 
    482           call_user_func( $this->admin_image_div_callback ); 
     627                call_user_func( $this->admin_image_div_callback ); 
    483628        } else { 
    484629        ?> 
    485         <div id="headimg" style="max-width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;background-image:url(<?php esc_url ( header_image() ) ?>);"> 
     630        <div id="headimg" style="max-width:<?php echo $this->get_allowed_header_size( 'width' ); ?>px; height:<?php echo $this->get_allowed_header_size( 'height' ); ?>px;background-image:url(<?php esc_url( header_image() ); ?>);"> 
    486631                <?php 
    487                 if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || '' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) || ! $this->header_text() ) 
     632                if ( 'blank' == get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) || '' == get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) || ! $this->header_text() ) 
    488633                        $style = ' style="display:none;"'; 
    489634                else 
    490635                        $style = ' style="color:#' . get_theme_mod( 'header_textcolor', HEADER_TEXTCOLOR ) . ';"'; 
    491636                ?> 
    492                 <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php bloginfo('url'); ?>"><?php bloginfo( 'name' ); ?></a></h1> 
     637                <h1><a id="name"<?php echo $style; ?> onclick="return false;" href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a></h1> 
    493638                <div id="desc"<?php echo $style; ?>><?php bloginfo( 'description' ); ?></div> 
    494639        </div> 
    495640        <?php } ?> 
     
    499644<tr valign="top"> 
    500645<th scope="row"><?php _e( 'Upload Image' ); ?></th> 
    501646<td> 
    502         <p><?php _e( 'You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image.' ); ?><br /> 
    503         <?php printf( __( 'Images of exactly <strong>%1$d &times; %2$d pixels</strong> will be used as-is.' ), HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT ); ?></p> 
    504         <form enctype="multipart/form-data" id="upload-form" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 2 ) ) ?>"> 
     647        <p><?php _e( 'You can upload a custom header image to be shown at the top of your site instead of the default one. On the next screen you will be able to crop the image.' ); ?></p> 
     648 
     649        <p><?php printf( __( 'Images of exactly <strong>%1$d &times; %2$d pixels</strong> will be used as-is.' ), $this->get_allowed_header_size( 'width' ), $this->get_allowed_header_size( 'height' ) ); ?></p> 
     650 
     651        <form enctype="multipart/form-data" id="upload-form" method="post" action="<?php echo esc_attr( add_query_arg( 'step', 2 ) ); ?>"> 
    505652        <p> 
    506653                <label for="upload"><?php _e( 'Choose an image from your computer:' ); ?></label><br /> 
    507654                <input type="file" id="upload" name="import" /> 
     
    623770         * @since 2.1.0 
    624771         */ 
    625772        function step_2() { 
    626                 check_admin_referer('custom-header-upload', '_wpnonce-custom-header-upload'); 
     773                check_admin_referer( 'custom-header-upload', '_wpnonce-custom-header-upload' ); 
    627774                if ( ! current_theme_supports( 'custom-header-uploads' ) ) 
    628775                        wp_die( 'Cheatin&#8217; uh?' ); 
    629776 
    630                 $overrides = array('test_form' => false); 
    631                 $file = wp_handle_upload($_FILES['import'], $overrides); 
     777                $overrides = array( 'test_form' => false ); 
     778                $file = wp_handle_upload( $_FILES['import'], $overrides ); 
    632779 
    633                 if ( isset($file['error']) ) 
    634                         wp_die( $file['error'],  __( 'Image Upload Error' ) ); 
     780                if ( isset( $file['error'] ) ) 
     781                        wp_die( $file['error'], __( 'Image Upload Error' ) ); 
    635782 
    636783                $url = $file['url']; 
    637784                $type = $file['type']; 
    638785                $file = $file['file']; 
    639                 $filename = basename($file); 
     786                $filename = basename( $file ); 
    640787 
    641788                // Construct the object array 
    642789                $object = array( 
    643                 'post_title' => $filename, 
    644                 'post_content' => $url, 
    645                 'post_mime_type' => $type, 
    646                 'guid' => $url); 
     790                        'post_title' => $filename, 
     791                        'post_content' => $url, 
     792                        'post_mime_type' => $type, 
     793                        'guid' => $url 
     794                ); 
    647795 
    648796                // Save the data 
    649                 $id = wp_insert_attachment($object, $file); 
     797                $id = wp_insert_attachment( $object, $file ); 
    650798 
    651                 list($width, $height, $type, $attr) = getimagesize( $file ); 
     799                list( $width, $height, $type, $attr ) = getimagesize( $file ); 
    652800 
    653                 if ( $width == HEADER_IMAGE_WIDTH && $height == HEADER_IMAGE_HEIGHT ) { 
    654                         // Add the meta-data 
    655                         wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) ); 
    656                         update_post_meta( $id, '_wp_attachment_is_custom_header', get_option('stylesheet' ) ); 
     801                $header_size = $this->get_allowed_header_size(); 
    657802 
    658                         set_theme_mod('header_image', esc_url($url)); 
    659                         do_action('wp_create_file_in_uploads', $file, $id); // For replication 
    660                         return $this->finished(); 
    661                 } elseif ( $width > HEADER_IMAGE_WIDTH ) { 
    662                         $oitar = $width / HEADER_IMAGE_WIDTH; 
    663                         $image = wp_crop_image($file, 0, 0, $width, $height, HEADER_IMAGE_WIDTH, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file)); 
    664                         if ( is_wp_error( $image ) ) 
    665                                 wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) ); 
     803                // Proceed with cropping action 
     804                $crop_type = $this->get_crop_type( $width, $height ); 
     805                switch ( $crop_type ) { 
     806                        // Case nocrop = uploaded image dimensions match allowed dimensions exactly 
     807                        case 'nocrop': 
    666808 
    667                         $image = apply_filters('wp_create_file_in_uploads', $image, $id); // For replication 
     809                                // Add the meta-data 
     810                                wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) ); 
     811                                update_post_meta( $id, '_wp_attachment_is_custom_header', get_option( 'stylesheet' ) ); 
    668812 
    669                         $url = str_replace(basename($url), basename($image), $url); 
    670                         $width = $width / $oitar; 
    671                         $height = $height / $oitar; 
    672                 } else { 
    673                         $oitar = 1; 
    674                 } 
    675                 ?> 
     813                                set_theme_mod( 'header_image', esc_url( $url ) ); 
     814                                do_action( 'wp_create_file_in_uploads', $file, $id ); // For replication 
     815                                return $this->finished(); 
    676816 
     817                                break; 
     818 
     819                        // Uploaded image width is higher than allowed width 
     820                        case 'crop_to_width': 
     821 
     822                                $oitar = $width / $header_size['width']; 
     823                                $image = wp_crop_image( $file, 0, 0, $width, $height, $header_size['width'], $height / $oitar, false, str_replace( basename( $file ), 'midsize-' . basename( $file ), $file ) ); 
     824                                if ( is_wp_error( $image ) ) 
     825                                        wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) ); 
     826 
     827                                $image = apply_filters( 'wp_create_file_in_uploads', $image, $id ); // For replication 
     828 
     829                                $url = str_replace( basename( $url ), basename( $image ), $url ); 
     830                                $width = $width / $oitar; 
     831                                $height = $height / $oitar; 
     832 
     833                                break; 
     834 
     835                        // Uploaded image height is higher than allowed height 
     836                        case 'crop_to_height': 
     837 
     838                                $oitar = $height / $header_size['height']; 
     839                                $image = wp_crop_image( $file, 0, 0, $width, $height, $width / $oitar, $header_size['width'], false, str_replace( basename( $file ), 'midsize-' . basename( $file ), $file ) ); 
     840                                if ( is_wp_error( $image ) ) 
     841                                        wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) ); 
     842 
     843                                $image = apply_filters( 'wp_create_file_in_uploads', $image, $id ); // For replication 
     844 
     845                                $url = str_replace( basename( $url ), basename( $image ), $url ); 
     846                                $width = $width / $oitar; 
     847                                $height = $height / $oitar; 
     848 
     849                                break; 
     850 
     851                        // Width/height do not match exactly but uploaded dimensions are smaller than maximum allowed 
     852                        // (Backcompat) normal crop 
     853                        default: 
     854                                $oitar = 1; 
     855                                break; 
     856                } // END $crop_type switch 
     857?> 
     858 
    677859<div class="wrap"> 
    678860<?php screen_icon(); ?> 
    679861<h2><?php _e( 'Crop Header Image' ); ?></h2> 
    680862 
    681 <form method="post" action="<?php echo esc_attr(add_query_arg('step', 3)); ?>"> 
    682         <p class="hide-if-no-js"><?php _e('Choose the part of the image you want to use as your header.'); ?></p> 
    683         <p class="hide-if-js"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p> 
     863<form method="post" action="<?php echo esc_attr( add_query_arg( 'step', 3 ) ); ?>"> 
     864        <p class="hide-if-no-js"><?php _e( 'Choose the part of the image you want to use as your header.' ); ?></p> 
     865        <p class="hide-if-js"><strong><?php _e( 'You need Javascript to choose a part of the image.' ); ?></strong></p> 
    684866 
    685867        <div id="crop_image" style="position: relative"> 
    686868                <img src="<?php echo esc_url( $url ); ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /> 
     
    692874        <input type="hidden" name="height" id="height" value="<?php echo esc_attr( $height ); ?>"/> 
    693875        <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr( $id ); ?>" /> 
    694876        <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr( $oitar ); ?>" /> 
    695         <?php wp_nonce_field( 'custom-header-crop-image' ) ?> 
     877        <?php wp_nonce_field( 'custom-header-crop-image' ); ?> 
    696878 
    697879        <?php submit_button( __( 'Crop and Publish' ) ); ?> 
    698880        </p> 
     
    707889         * @since 2.1.0 
    708890         */ 
    709891        function step_3() { 
    710                 check_admin_referer('custom-header-crop-image'); 
     892                check_admin_referer( 'custom-header-crop-image' ); 
    711893                if ( ! current_theme_supports( 'custom-header-uploads' ) ) 
    712894                        wp_die( 'Cheatin&#8217; uh?' ); 
    713895 
     
    720902 
    721903                $original = get_attached_file( $_POST['attachment_id'] ); 
    722904 
    723                 $cropped = wp_crop_image($_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT); 
     905                // If flexible upload, use the selected JS cropping dimensions be the destination size instead of hard-coded dimensions 
     906                if ( current_theme_supports( 'flexible_header_image_upload' ) ) 
     907                        $cropped = wp_crop_image( $_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], $_POST['width'], $_POST['height'] ); 
     908                else 
     909                        $cropped = wp_crop_image( $_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], $this->get_allowed_header_size( 'width' ), $this->get_allowed_header_size( 'height' ) ); 
     910 
    724911                if ( is_wp_error( $cropped ) ) 
    725912                        wp_die( __( 'Image could not be processed.  Please go back and try again.' ), __( 'Image Processing Error' ) ); 
    726913