WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.


Built from https://develop.svn.wordpress.org/trunk@33053


git-svn-id: http://core.svn.wordpress.org/trunk@33024 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Konstantin Obenland 2015-07-02 21:16:24 +00:00
parent 3fb3d2a762
commit cd7a40bdc7
8 changed files with 81 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
wp-admin/css/site-icon-rtl.css
View File

@ -17,6 +17,10 @@
max-width: 720px;
}
.site-icon-crop-wrapper {
float: right;
}
.site-icon-crop-preview-shell {
float: left;
overflow: hidden;
@ -55,4 +59,25 @@
height: 64px;
overflow: hidden;
width: 64px;
}
}
.site-icon-crop-shell .submit {
clear: both;
}
@media only screen and (max-width: 768px) {
.site-icon-crop-wrapper,
.site-icon-crop-preview-shell {
float: none;
}
.site-icon-crop-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.site-icon-crop-wrapper img {
max-width: 100%;
height: auto;
}
}

27
wp-admin/css/site-icon.css
View File

@ -17,6 +17,10 @@
max-width: 720px;
}
.site-icon-crop-wrapper {
float: left;
}
.site-icon-crop-preview-shell {
float: right;
overflow: hidden;
@ -55,4 +59,25 @@
height: 64px;
overflow: hidden;
width: 64px;
}
}
.site-icon-crop-shell .submit {
clear: both;
}
@media only screen and (max-width: 768px) {
.site-icon-crop-wrapper,
.site-icon-crop-preview-shell {
float: none;
}
.site-icon-crop-wrapper {
max-width: 100%;
margin-bottom: 20px;
}
.site-icon-crop-wrapper img {
max-width: 100%;
height: auto;
}
}

2
wp-admin/css/wp-admin-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/css/wp-admin.min.css vendored
View File

File diff suppressed because one or more lines are too long

116
wp-admin/includes/class-wp-site-icon.php
View File

@ -249,33 +249,14 @@ class WP_Site_Icon {
return;
}
// Let's resize the image so that the user can easier crop a image that in the admin view.
$crop_height = absint( $this->page_crop * $image_size[1] / $image_size[0] );
$cropped = wp_crop_image( $attachment_id, 0, 0, 0, 0, $this->page_crop, $crop_height );
if ( ! $cropped || is_wp_error( $cropped ) ) {
wp_die( __( 'Image could not be processed. Please go back and try again.' ), __( 'Image Processing Error' ) );
}
$cropped_size = getimagesize( $cropped );
// set default values (in case of no JS)
$crop_ratio = $image_size[0] / $cropped_size[0];
if ( $cropped_size[0] < $cropped_size[1] ) {
$crop_x = 0;
$crop_y = absint( ( $cropped_size[1] - $cropped_size[0] ) / 2 );
$crop_size = $cropped_size[0];
} elseif ( $cropped_size[0] > $cropped_size[1] ) {
$crop_x = absint( ( $cropped_size[0] - $cropped_size[1] ) / 2 );
$crop_y = 0;
$crop_size = $cropped_size[1];
} else {
$crop_x = 0;
$crop_y = 0;
$crop_size = $cropped_size[0];
}
wp_delete_file( $cropped );
wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', $this->initial_crop_data( $crop_ratio, $cropped_size ) );
wp_localize_script( 'site-icon-crop', 'wpSiteIconCropData', array(
'init_x' => 0,
'init_y' => 0,
'init_size' => $this->min_size,
'min_size' => $this->min_size,
'width' => $image_size[0],
'height' => $image_size[1],
) );
?>
<div class="wrap">
@ -287,6 +268,10 @@ class WP_Site_Icon {
<p class="hide-if-no-js description"><?php _e('Choose the part of the image you want to use as your site icon.'); ?></p>
<p class="hide-if-js description"><strong><?php _e( 'You need Javascript to choose a part of the image.'); ?></strong></p>
<div class="site-icon-crop-wrapper">
<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' ); ?>"/>
</div>
<div class="site-icon-crop-preview-shell hide-if-no-js">
<h3><?php _e( 'Preview' ); ?></h3>
<strong><?php _e( 'As your favicon' ); ?></strong>
@ -304,16 +289,14 @@ class WP_Site_Icon {
<img src="<?php echo esc_url( $url ); ?>" id="preview-homeicon" alt="<?php esc_attr_e( 'Preview Home Icon' ); ?>"/>
</div>
</div>
<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' ); ?>"/>
<input type="hidden" id="crop-x" name="crop-x" value="<?php echo esc_attr( $crop_x ); ?>" />
<input type="hidden" id="crop-y" name="crop-y" value="<?php echo esc_attr( $crop_y ); ?>" />
<input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $crop_size ); ?>" />
<input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $crop_size ); ?>" />
<input type="hidden" id="crop-x" name="crop-x" value="0" />
<input type="hidden" id="crop-y" name="crop-y" value="0" />
<input type="hidden" id="crop-width" name="crop-w" value="<?php echo esc_attr( $this->min_size ); ?>" />
<input type="hidden" id="crop-height" name="crop-h" value="<?php echo esc_attr( $this->min_size ); ?>" />
<input type="hidden" name="action" value="set_site_icon" />
<input type="hidden" name="attachment_id" value="<?php echo esc_attr( $attachment_id ); ?>" />
<input type="hidden" name="crop_ratio" value="<?php echo esc_attr( $crop_ratio ); ?>" />
<?php if ( empty( $_POST ) && isset( $_GET['file'] ) ) : ?>
<input type="hidden" name="create-new-attachment" value="true" />
<?php endif; ?>
@ -358,8 +341,7 @@ class WP_Site_Icon {
$this->delete_site_icon();
if ( empty( $_REQUEST['skip-cropping'] ) ) {
$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'] );
$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 );
$cropped = wp_crop_image( $attachment_id, $_REQUEST['crop-x'], $_REQUEST['crop-y'], $_REQUEST['crop-w'], $_REQUEST['crop-h'], $this->min_size, $this->min_size );
} elseif ( $create_new_attachement ) {
$cropped = _copy_image_file( $attachment_id );
@ -390,70 +372,6 @@ class WP_Site_Icon {
add_settings_error( 'site-icon', 'icon-updated', __( 'Site Icon updated.' ), 'updated' );
}
/**
* This function is used to pass data to the localize script
* so that we can center the cropper and also set the minimum
* cropper.
*
* @since 4.3.0
*
* @param float $ratio
* @param array $cropped_size
* @return array
*/
public function initial_crop_data( $ratio, $cropped_size ) {
$init_x = $init_y = $init_size = 0;
$min_crop_size = ( $this->min_size / $ratio );
$resized_width = $cropped_size[0];
$resized_height = $cropped_size[1];
// Landscape format ( width > height )
if ( $resized_width > $resized_height ) {
$init_x = ( $this->page_crop - $resized_height ) / 2;
$init_size = $resized_height;
}
// Portrait format ( height > width )
if ( $resized_width < $resized_height ) {
$init_y = ( $this->page_crop - $resized_width ) / 2;
$init_size = $resized_height;
}
// Square height == width
if ( $resized_width == $resized_height ) {
$init_size = $resized_height;
}
return array(
'init_x' => $init_x,
'init_y' => $init_y,
'init_size' => $init_size,
'min_size' => $min_crop_size,
);
}
/**
* Converts the coordinates from the downsized image to the original image for accurate cropping.
*
* @since 4.3.0
*
* @param int $crop_x
* @param int $crop_y
* @param int $crop_width
* @param int $crop_height
* @param float $ratio
* @return array
*/
public function convert_coordinates_from_resized_to_full( $crop_x, $crop_y, $crop_width, $crop_height, $ratio ) {
return array(
'crop_x' => floor( $crop_x * $ratio ),
'crop_y' => floor( $crop_y * $ratio ),
'crop_width' => floor( $crop_width * $ratio ),
'crop_height' => floor( $crop_height * $ratio ),
);
}
/**
* Upload the file to be cropped in the second step.
*

18
wp-admin/js/site-icon-crop.js
View File

@ -16,21 +16,18 @@
var rx = 64 / coords.w,
ry = 64 / coords.h,
preview_rx = 16 / coords.w,
preview_ry = 16 / coords.h,
$cropImage = $( '#crop-image' ),
$homeIcon = $( '#preview-homeicon' ),
$favicon = $( '#preview-favicon' );
preview_ry = 16 / coords.h;
$homeIcon.css({
width: Math.round(rx * $cropImage.attr( 'width' ) ) + 'px',
height: Math.round(ry * $cropImage.attr( 'height' ) ) + 'px',
$( '#preview-homeicon' ).css({
width: Math.round(rx * wpSiteIconCropData.width ) + 'px',
height: Math.round(ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
$favicon.css({
width: Math.round( preview_rx * $cropImage.attr( 'width' ) ) + 'px',
height: Math.round( preview_ry * $cropImage.attr( 'height' ) ) + 'px',
$( '#preview-favicon' ).css({
width: Math.round( preview_rx * wpSiteIconCropData.width ) + 'px',
height: Math.round( preview_ry * wpSiteIconCropData.height ) + 'px',
marginLeft: '-' + Math.round( preview_rx * coords.x ) + 'px',
marginTop: '-' + Math.floor( preview_ry* coords.y ) + 'px'
});
@ -43,6 +40,7 @@
aspectRatio: 1,
onSelect: siteIconCrop.updateCoords,
onChange: siteIconCrop.updateCoords,
trueSize: [ wpSiteIconCropData.width, wpSiteIconCropData.height ],
minSize: [ wpSiteIconCropData.min_size, wpSiteIconCropData.min_size ]
});
jcrop_api.animateTo([wpSiteIconCropData.init_x, wpSiteIconCropData.init_y, wpSiteIconCropData.init_size, wpSiteIconCropData.init_size]);

2
wp-admin/js/site-icon-crop.min.js vendored
View File

@ -1 +1 @@
!function(a){var b={},c={updateCoords:function(b){a("#crop-x").val(b.x),a("#crop-y").val(b.y),a("#crop-width").val(b.w),a("#crop-height").val(b.h),c.showPreview(b)},showPreview:function(b){var c=64/b.w,d=64/b.h,e=16/b.w,f=16/b.h,g=a("#crop-image"),h=a("#preview-homeicon"),i=a("#preview-favicon");h.css({width:Math.round(c*g.attr("width"))+"px",height:Math.round(d*g.attr("height"))+"px",marginLeft:"-"+Math.round(c*b.x)+"px",marginTop:"-"+Math.round(d*b.y)+"px"}),i.css({width:Math.round(e*g.attr("width"))+"px",height:Math.round(f*g.attr("height"))+"px",marginLeft:"-"+Math.round(e*b.x)+"px",marginTop:"-"+Math.floor(f*b.y)+"px"})},ready:function(){b=a.Jcrop("#crop-image"),b.setOptions({bgColor:"transparent",aspectRatio:1,onSelect:c.updateCoords,onChange:c.updateCoords,minSize:[wpSiteIconCropData.min_size,wpSiteIconCropData.min_size]}),b.animateTo([wpSiteIconCropData.init_x,wpSiteIconCropData.init_y,wpSiteIconCropData.init_size,wpSiteIconCropData.init_size])}};c.ready()}(jQuery);
!function(a){var b={},c={updateCoords:function(b){a("#crop-x").val(b.x),a("#crop-y").val(b.y),a("#crop-width").val(b.w),a("#crop-height").val(b.h),c.showPreview(b)},showPreview:function(b){var c=64/b.w,d=64/b.h,e=16/b.w,f=16/b.h;a("#preview-homeicon").css({width:Math.round(c*wpSiteIconCropData.width)+"px",height:Math.round(d*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(c*b.x)+"px",marginTop:"-"+Math.round(d*b.y)+"px"}),a("#preview-favicon").css({width:Math.round(e*wpSiteIconCropData.width)+"px",height:Math.round(f*wpSiteIconCropData.height)+"px",marginLeft:"-"+Math.round(e*b.x)+"px",marginTop:"-"+Math.floor(f*b.y)+"px"})},ready:function(){b=a.Jcrop("#crop-image"),b.setOptions({bgColor:"transparent",aspectRatio:1,onSelect:c.updateCoords,onChange:c.updateCoords,trueSize:[wpSiteIconCropData.width,wpSiteIconCropData.height],minSize:[wpSiteIconCropData.min_size,wpSiteIconCropData.min_size]}),b.animateTo([wpSiteIconCropData.init_x,wpSiteIconCropData.init_y,wpSiteIconCropData.init_size,wpSiteIconCropData.init_size])}};c.ready()}(jQuery);

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-beta1-33052';
$wp_version = '4.3-beta1-33053';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.