* @subpackage Administration
*/
+/**
+ * Loads the WP image-editing interface.
+ *
+ * @param int $post_id Post ID.
+ * @param bool|object $msg Optional. Message to display for image editor updates or errors.
+ * Default false.
+ */
function wp_image_editor($post_id, $msg = false) {
$nonce = wp_create_nonce("image_editor-$post_id");
$meta = wp_get_attachment_metadata($post_id);
}
?>
- <div class="imgedit-wrap">
+ <div class="imgedit-wrap wp-clearfix">
<div id="imgedit-panel-<?php echo $post_id; ?>">
<div class="imgedit-settings">
<div class="imgedit-group">
<div class="imgedit-group-top">
- <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+ <h2><?php _e( 'Scale Image' ); ?></h2>
+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button>
<div class="imgedit-help">
<p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p>
</div>
<p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p>
<?php endif ?>
<div class="imgedit-submit">
- <span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> × <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
- <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
- <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
+
+ <fieldset class="imgedit-scale">
+ <legend><?php _e( 'New dimensions:' ); ?></legend>
+ <div class="nowrap">
+ <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span>
+ <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
+ </label>
+ <span class="imgedit-separator">×</span>
+ <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span>
+ <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
+ </label>
+ <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
+ <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
+ </div>
+ </fieldset>
+
</div>
</div>
</div>
<div class="imgedit-group">
<div class="imgedit-group-top">
- <h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
+ <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
<div class="imgedit-help">
<p><?php _e('Discard any changes and restore the original image.');
<div class="imgedit-group">
<div class="imgedit-group-top">
- <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+ <h2><?php _e( 'Image Crop' ); ?></h2>
+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button>
<div class="imgedit-help">
<p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
</div>
</div>
- <p>
- <?php _e('Aspect ratio:'); ?>
- <span class="nowrap">
- <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" />
- :
- <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" />
- </span>
- </p>
-
- <p id="imgedit-crop-sel-<?php echo $post_id; ?>">
- <?php _e('Selection:'); ?>
- <span class="nowrap">
- <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
- ×
- <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" />
- </span>
- </p>
+ <fieldset class="imgedit-crop-ratio">
+ <legend><?php _e( 'Aspect ratio:' ); ?></legend>
+ <div class="nowrap">
+ <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
+ <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
+ </label>
+ <span class="imgedit-separator">:</span>
+ <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
+ <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
+ </label>
+ </div>
+ </fieldset>
+
+ <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
+ <legend><?php _e( 'Selection:' ); ?></legend>
+ <div class="nowrap">
+ <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
+ <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
+ </label>
+ <span class="imgedit-separator">×</span>
+ <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
+ <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" />
+ </label>
+ </div>
+ </fieldset>
+
</div>
<?php if ( $thumb && $sub_sizes ) {
<div class="imgedit-group imgedit-applyto">
<div class="imgedit-group-top">
- <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
+ <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
+ <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button>
<p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p>
</div>
- <p>
+ <figure class="imgedit-thumbnail-preview">
<img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" />
- <br /><?php _e('Current thumbnail'); ?>
- </p>
+ <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
+ </figure>
- <p id="imgedit-save-target-<?php echo $post_id; ?>">
- <strong><?php _e('Apply changes to:'); ?></strong><br />
+ <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
+ <fieldset>
+ <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
<label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
<label class="imgedit-label">
<input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
<?php _e('All sizes except thumbnail'); ?></label>
- </p>
+ </fieldset>
+ </div>
</div>
<?php } ?>
</div>
- <div class="imgedit-panel-content">
+ <div class="imgedit-panel-content wp-clearfix">
<?php echo $note; ?>
- <div class="imgedit-menu">
- <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
+ <div class="imgedit-menu wp-clearfix">
+ <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
// On some setups GD library does not provide imagerotate() - Ticket #11536
- if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
- <div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
- <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
+ if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) {
+ $note_no_rotate = '';
+ ?>
+ <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
+ <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
<?php } else {
- $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
+ $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
?>
- <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>
- <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
+ <button type="button" class="imgedit-rleft button disabled" disabled></button>
+ <button type="button" class="imgedit-rright button disabled" disabled></button>
<?php } ?>
- <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
- <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
+ <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
+ <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
- <div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>
- <div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>
- <br class="clear" />
+ <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
+ <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
+ <?php echo $note_no_rotate; ?>
</div>
<input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
<input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
<div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
- <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" />
+ <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="" />
</div>
<div class="imgedit-submit">
- <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
+ <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
<input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
</div>
</div>
* @param WP_Image_Editor $image
* @param string $mime_type
* @param int $post_id
- * @return boolean
+ * @return bool
*/
function wp_stream_image( $image, $mime_type, $post_id ) {
if ( $image instanceof WP_Image_Editor ) {
* @param WP_Image_Editor $image
* @param string $mime_type
* @param int $post_id
- * @return boolean
+ * @return bool
*/
function wp_save_image_file( $filename, $image, $mime_type, $post_id ) {
if ( $image instanceof WP_Image_Editor ) {
}
}
+/**
+ * Image preview ratio. Internal use only.
+ *
+ * @since 2.9.0
+ *
+ * @ignore
+ * @param int $w Image width in pixels.
+ * @param int $h Image height in pixels.
+ * @return float|int Image preview ratio.
+ */
function _image_get_preview_ratio($w, $h) {
$max = max($w, $h);
return $max > 400 ? (400 / $max) : 1;
}
-// @TODO: Returns GD resource, but is NOT public
+/**
+ * Returns an image resource. Internal use only.
+ *
+ * @since 2.9.0
+ *
+ * @ignore
+ * @param resource $img Image resource.
+ * @param float|int $angle Image rotation angle, in degrees.
+ * @return resource|false GD image resource, false otherwise.
+ */
function _rotate_image_resource($img, $angle) {
_deprecated_function( __FUNCTION__, '3.5', __( 'Use WP_Image_Editor::rotate' ) );
if ( function_exists('imagerotate') ) {
}
/**
- * @TODO: Only used within image_edit_apply_changes
- * and receives/returns GD Resource.
- * Consider removal.
+ * Flips an image resource. Internal use only.
+ *
+ * @since 2.9.0
*
- * @param GD_Resource $img
- * @param boolean $horz
- * @param boolean $vert
- * @return GD_Resource
+ * @ignore
+ * @param resource $img Image resource.
+ * @param bool $horz Whether to flip horizontally.
+ * @param bool $vert Whether to flip vertically.
+ * @return resource (maybe) flipped image resource.
*/
function _flip_image_resource($img, $horz, $vert) {
_deprecated_function( __FUNCTION__, '3.5', __( 'Use WP_Image_Editor::flip' ) );
}
/**
- * @TODO: Only used within image_edit_apply_changes
- * and receives/returns GD Resource.
- * Consider removal.
+ * Crops an image resource. Internal use only.
+ *
+ * @since 2.9.0
*
- * @param GD_Resource $img
- * @param float $x
- * @param float $y
- * @param float $w
- * @param float $h
- * @return GD_Resource
+ * @ignore
+ * @param resource $img Image resource.
+ * @param float $x Source point x-coordinate.
+ * @param float $y Source point y-cooredinate.
+ * @param float $w Source width.
+ * @param float $h Source height.
+ * @return resource (maybe) cropped image resource.
*/
function _crop_image_resource($img, $x, $y, $w, $h) {
$dst = wp_imagecreatetruecolor($w, $h);
/**
* Performs group of changes on Editor specified.
*
- * @param WP_Image_Editor $image
- * @param type $changes
- * @return WP_Image_Editor
+ * @since 2.9.0
+ *
+ * @param WP_Image_Editor $image {@see WP_Image_Editor} instance.
+ * @param array $changes Array of change operations.
+ * @return WP_Image_Editor {@see WP_Image_Editor} instance with changes applied.
*/
function image_edit_apply_changes( $image, $changes ) {
if ( is_resource( $image ) )
// Combine operations.
if ( count($changes) > 1 ) {
$filtered = array($changes[0]);
- for ( $i = 0, $j = 1; $j < count($changes); $j++ ) {
+ for ( $i = 0, $j = 1, $c = count( $changes ); $j < $c; $j++ ) {
$combined = false;
if ( $filtered[$i]->type == $changes[$j]->type ) {
switch ( $filtered[$i]->type ) {
* in $_REQUEST['history']
*
* @param int $post_id
- * @return boolean
+ * @return bool
*/
function stream_preview_image( $post_id ) {
$post = get_post( $post_id );
$img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) );
- if ( is_wp_error( $img ) )
- return false;
+ if ( is_wp_error( $img ) ) {
+ return false;
+ }
$changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null;
if ( $changes )
return wp_stream_image( $img, $post->post_mime_type, $post_id );
}
+/**
+ * Restores the metadata for a given attachment.
+ *
+ * @since 2.9.0
+ *
+ * @param int $post_id Attachment post ID.
+ * @return stdClass Image restoration message object.
+ */
function wp_restore_image($post_id) {
$meta = wp_get_attachment_metadata($post_id);
$file = get_attached_file($post_id);
- $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
+ $backup_sizes = $old_backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
$restored = false;
$msg = new stdClass;
if ( $parts['basename'] != $data['file'] ) {
if ( defined('IMAGE_EDIT_OVERWRITE') && IMAGE_EDIT_OVERWRITE ) {
- // Delete only if it's edited image.
+ // Delete only if it's an edited image.
if ( preg_match('/-e[0-9]{13}\./', $parts['basename']) ) {
-
- /** This filter is documented in wp-admin/custom-header.php */
- $delpath = apply_filters( 'wp_delete_file', $file );
- @unlink($delpath);
+ wp_delete_file( $file );
}
} elseif ( isset( $meta['width'], $meta['height'] ) ) {
$backup_sizes["full-$suffix"] = array('width' => $meta['width'], 'height' => $meta['height'], 'file' => $parts['basename']);
if ( isset($meta['sizes'][$default_size]) && $meta['sizes'][$default_size]['file'] != $data['file'] ) {
if ( defined('IMAGE_EDIT_OVERWRITE') && IMAGE_EDIT_OVERWRITE ) {
- // Delete only if it's edited image
+ // Delete only if it's an edited image.
if ( preg_match('/-e[0-9]{13}-/', $meta['sizes'][$default_size]['file']) ) {
- /** This filter is documented in wp-admin/custom-header.php */
- $delpath = apply_filters( 'wp_delete_file', path_join($parts['dirname'], $meta['sizes'][$default_size]['file']) );
- @unlink($delpath);
+ $delete_file = path_join( $parts['dirname'], $meta['sizes'][$default_size]['file'] );
+ wp_delete_file( $delete_file );
}
} else {
$backup_sizes["$default_size-{$suffix}"] = $meta['sizes'][$default_size];
}
}
- if ( !wp_update_attachment_metadata($post_id, $meta) || !update_post_meta( $post_id, '_wp_attachment_backup_sizes', $backup_sizes) ) {
+ if ( ! wp_update_attachment_metadata( $post_id, $meta ) ||
+ ( $old_backup_sizes !== $backup_sizes && ! update_post_meta( $post_id, '_wp_attachment_backup_sizes', $backup_sizes ) ) ) {
+
$msg->error = __('Cannot save image metadata.');
return $msg;
}
* Saves image to post along with enqueued changes
* in $_REQUEST['history']
*
+ * @global array $_wp_additional_image_sizes
+ *
* @param int $post_id
* @return \stdClass
*/
if ( $tag )
$backup_sizes[$tag] = array('width' => $meta['width'], 'height' => $meta['height'], 'file' => $path_parts['basename']);
- $success = update_attached_file( $post_id, $new_path );
+ $success = ( $path === $new_path ) || update_attached_file( $post_id, $new_path );
$meta['file'] = _wp_relative_upload_path( $new_path );
}
if ( $delete ) {
-
- /** This filter is documented in wp-admin/custom-header.php */
- $delpath = apply_filters( 'wp_delete_file', $new_path );
- @unlink( $delpath );
+ wp_delete_file( $new_path );
}
$return->msg = esc_js( __('Image saved') );