WordPress.org

Make WordPress Core

Changeset 33053


Ignore:
Timestamp:
07/02/2015 09:15:52 PM (3 years 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.