WordPress.org
Get WordPress

Make WordPress Core

Ticket #17242: 17242-first-pass.diff

File 17242-first-pass.diff, 19.1 KB (added by lancewillett, 12 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