WordPress.org

Make WordPress Core

Changeset 33053


Ignore:
Timestamp:
07/02/15 21:15:52 (21 months ago)
Author:
obenland
Message:

Site Icon: Improve responsiveness for small screen devices.

Using Jcrop's trueSize argument also allows us to get rid of all that behind
the scenes temp image creating and back and forth calculating of image sizes.

Props tyxla for initial patch.
See #16434.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/site-icon.css

    r33049 r33053  
    1616.site-icon-crop-shell { 
    1717    max-width: 720px; 
     18} 
     19 
     20.site-icon-crop-wrapper { 
     21    float: left; 
    1822} 
    1923 
     
    5660    overflow: hidden; 
    5761    width: 64px; 
    58 }  
     62} 
     63 
     64.site-icon-crop-shell .submit { 
     65    clear: both; 
     66} 
     67 
     68@media only screen and (max-width: 768px) { 
     69    .site-icon-crop-wrapper, 
     70    .site-icon-crop-preview-shell { 
     71        float: none; 
     72    } 
     73 
     74    .site-icon-crop-wrapper { 
     75        max-width: 100%; 
     76        margin-bottom: 20px; 
     77    } 
     78 
     79    .site-icon-crop-wrapper img { 
     80        max-width: 100%; 
     81        height: auto; 
     82    } 
     83} 
  • trunk/src/wp-admin/includes/class-wp-site-icon.php

    r33051 r33053  
    250250        } 
    251251 
    252         // Let's resize the image so that the user can easier crop a image that in the admin view. 
    253         $crop_height = absint( $this->page_crop * $image_size[1] / $image_size[0] ); 
    254         $cropped = wp_crop_image( $attachment_id, 0, 0, 0, 0, $this->page_crop, $crop_height ); 
    255         if ( ! $cropped || is_wp_error( $cropped ) ) { 
    256             wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) ); 
    257         } 
    258         $cropped_size = getimagesize( $cropped ); 
    259  
    260         // set default values (in case of no JS) 
    261         $crop_ratio = $image_size[0] / $cropped_size[0]; 
    262         if ( $cropped_size[0] < $cropped_size[1] ) { 
    263             $crop_x    = 0; 
    264             $crop_y    = absint( ( $cropped_size[1] - $cropped_size[0] ) / 2 ); 
    265             $crop_size = $cropped_size[0]; 
    266         } elseif ( $cropped_size[0] > $cropped_size[1] ) { 
    267             $crop_x    = absint( ( $cropped_size[0] - $cropped_size[1] ) / 2 ); 
    268             $crop_y    = 0; 
    269             $crop_size = $cropped_size[1]; 
    270         } else { 
    271             $crop_x    = 0; 
    272             $crop_y    = 0; 
    273             $crop_size = $cropped_size[0]; 
    274         } 
    275  
    276         wp_delete_file( $cropped ); 
    277  
    278         wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', $this->initial_crop_data( $crop_ratio, $cropped_size ) ); 
     252        wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', array( 
     253            'init_x'    => 0, 
     254            'init_y'    => 0, 
     255            'init_size' => $this->min_size, 
     256            'min_size'  => $this->min_size, 
     257            'width'     => $image_size[0], 
     258            'height'    => $image_size[1], 
     259        ) ); 
    279260        ?> 
    280261 
     
    287268                    <p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p> 
    288269                    <p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p> 
     270 
     271                    <div class="site-icon-crop-wrapper"> 
     272                        <img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="512" height="" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/> 
     273                    </div> 
    289274 
    290275                    <div class="site-icon-crop-preview-shell hide-if-no-js"> 
     
    305290                        </div> 
    306291                    </div> 
    307                     <img src="<?php echo esc_url( $url ); ?>" id="crop-image" class="site-icon-crop-image" width="<?php echo esc_attr( $cropped_size[0] ); ?>" height="<?php echo esc_attr( $cropped_size[1] ); ?>" alt="<?php esc_attr_e( 'Image to be cropped' ); ?>"/> 
    308  
    309                     <input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" /> 
    310                     <input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" /> 
    311                     <input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $crop_size ); ?>" /> 
    312                     <input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $crop_size ); ?>" /> 
     292 
     293                    <input type="hidden" id="crop-x" name="crop-x" value="0" /> 
     294                    <input type="hidden" id="crop-y" name="crop-y" value="0" /> 
     295                    <input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $this->min_size ); ?>" /> 
     296                    <input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $this->min_size ); ?>" /> 
    313297 
    314298                    <input type="hidden" name="action" value="set_site_icon" /> 
    315299                    <input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" /> 
    316                     <input type="hidden" name="crop_ratio" value="<?php echo esc_attr( $crop_ratio ); ?>" /> 
    317300                    <?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?> 
    318301                        <input type="hidden" name="create-new-attachment" value="true" /> 
     
    359342 
    360343            if ( empty( $_REQUEST['skip-cropping'] ) ) { 
    361                 $crop_data = $this->convert_coordinates_from_resized_to_full( $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], (float) $_REQUEST['crop_ratio'] ); 
    362                 $cropped   = wp_crop_image( $attachment_id, $crop_data['crop_x'], $crop_data['crop_y'], $crop_data['crop_width'], $crop_data['crop_height'], $this->min_size, $this->min_size ); 
     344                $cropped = wp_crop_image( $attachment_id, $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], $this->min_size, $this->min_size ); 
    363345 
    364346            } elseif ( $create_new_attachement ) { 
     
    389371 
    390372        add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' ); 
    391     } 
    392  
    393     /** 
    394      * This function is used to pass data to the localize script 
    395      * so that we can center the cropper and also set the minimum 
    396      * cropper. 
    397      * 
    398      * @since 4.3.0 
    399      * 
    400      * @param float $ratio 
    401      * @param array $cropped_size 
    402      * @return array 
    403      */ 
    404     public function initial_crop_data( $ratio, $cropped_size ) { 
    405         $init_x = $init_y = $init_size = 0; 
    406  
    407         $min_crop_size  = ( $this->min_size / $ratio ); 
    408         $resized_width  = $cropped_size[0]; 
    409         $resized_height = $cropped_size[1]; 
    410  
    411         // Landscape format ( width > height ) 
    412         if ( $resized_width > $resized_height ) { 
    413             $init_x    = ( $this->page_crop - $resized_height ) / 2; 
    414             $init_size = $resized_height; 
    415         } 
    416  
    417         // Portrait format ( height > width ) 
    418         if ( $resized_width < $resized_height ) { 
    419             $init_y    = ( $this->page_crop - $resized_width ) / 2; 
    420             $init_size = $resized_height; 
    421         } 
    422  
    423         // Square height == width 
    424         if ( $resized_width == $resized_height ) { 
    425             $init_size = $resized_height; 
    426         } 
    427  
    428         return array( 
    429             'init_x'    => $init_x, 
    430             'init_y'    => $init_y, 
    431             'init_size' => $init_size, 
    432             'min_size'  => $min_crop_size, 
    433         ); 
    434     } 
    435  
    436     /** 
    437      * Converts the coordinates from the downsized image to the original image for accurate cropping. 
    438      * 
    439      * @since 4.3.0 
    440      * 
    441      * @param int   $crop_x 
    442      * @param int   $crop_y 
    443      * @param int   $crop_width 
    444      * @param int   $crop_height 
    445      * @param float $ratio 
    446      * @return array 
    447      */ 
    448     public function convert_coordinates_from_resized_to_full( $crop_x, $crop_y, $crop_width, $crop_height, $ratio ) { 
    449         return array( 
    450             'crop_x'      => floor( $crop_x * $ratio ), 
    451             'crop_y'      => floor( $crop_y * $ratio ), 
    452             'crop_width'  => floor( $crop_width * $ratio ), 
    453             'crop_height' => floor( $crop_height * $ratio ), 
    454         ); 
    455373    } 
    456374 
  • trunk/src/wp-admin/js/site-icon-crop.js

    r33049 r33053  
    1717                ry = 64 / coords.h, 
    1818                preview_rx = 16 / coords.w, 
    19                 preview_ry = 16 / coords.h, 
    20                 $cropImage = $( '#crop-image' ), 
    21                 $homeIcon = $( '#preview-homeicon' ), 
    22                 $favicon = $( '#preview-favicon' ); 
     19                preview_ry = 16 / coords.h; 
    2320 
    24             $homeIcon.css({ 
    25                 width: Math.round(rx * $cropImage.attr( 'width' ) ) + 'px', 
    26                 height: Math.round(ry * $cropImage.attr( 'height' ) ) + 'px', 
     21            $( '#preview-homeicon' ).css({ 
     22                width: Math.round(rx * wpSiteIconCropData.width ) + 'px', 
     23                height: Math.round(ry * wpSiteIconCropData.height ) + 'px', 
    2724                marginLeft: '-' + Math.round(rx * coords.x) + 'px', 
    2825                marginTop: '-' + Math.round(ry * coords.y) + 'px' 
    2926            }); 
    3027 
    31             $favicon.css({ 
    32                 width: Math.round( preview_rx *  $cropImage.attr( 'width' ) ) + 'px', 
    33                 height: Math.round( preview_ry * $cropImage.attr( 'height' ) ) + 'px', 
     28            $( '#preview-favicon' ).css({ 
     29                width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px', 
     30                height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px', 
    3431                marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px', 
    3532                marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px' 
     
    4441                onSelect: siteIconCrop.updateCoords, 
    4542                onChange: siteIconCrop.updateCoords, 
     43                trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ], 
    4644                minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ] 
    4745            }); 
Note: See TracChangeset for help on using the changeset viewer.