| | 26 | if ( $thumb && $sub_sizes ) { |
| | 27 | $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 ); |
| | 28 | |
| | 29 | add_image_edit_group ( |
| | 30 | 'thumbnail-settings', |
| | 31 | __( 'Thumbnail Settings' ), |
| | 32 | 'imgedit_group_thumbnail_settings', |
| | 33 | 'default', |
| | 34 | __('The thumbnail image can be cropped differently. For example it can be square or contain only a portion of the original image to showcase it better. Here you can select whether to apply changes to all image sizes or make the thumbnail different.'), |
| | 35 | 'imgedit-applyto', |
| | 36 | compact( 'thumb', 'thumb_img', 'sub_sizes' ) |
| | 37 | ); |
| | 38 | } |
| | 39 | |
| | 40 | add_image_edit_group( |
| | 41 | 'image-scale', |
| | 42 | __( 'Scale Image' ), |
| | 43 | 'imgedit_group_scale_image', |
| | 44 | 'default', |
| | 45 | __( 'You can proportionally scale the original image. For best results the scaling should be done before performing any other operations on it like crop, rotate, etc. Note that images can only be scaled down, not up.' ), |
| | 46 | '', |
| | 47 | compact( 'meta' ) |
| | 48 | ); |
| | 49 | |
| | 50 | |
| | 51 | add_image_edit_group( |
| | 52 | 'image-crop', |
| | 53 | __( 'Crop Image' ), |
| | 54 | 'imgedit_group_crop_image', |
| | 55 | 'default', |
| | 56 | sprintf( |
| | 57 | '<p>%1$s</p><p><strong>%2$s</strong><br />%3$s</p><p><strong>%4s</strong><br />%5$s</p>', |
| | 58 | __('The image can be cropped by clicking on it and dragging to select the desired part. While dragging the dimensions of the selection are displayed below.'), |
| | 59 | __('Crop Aspect Ratio'), |
| | 60 | __('You can specify the crop selection aspect ratio then hold down the Shift key while dragging to lock it. The values can be 1:1 (square), 4:3, 16:9, etc. If there is a selection, specifying aspect ratio will set it immediately.'), |
| | 61 | __('Crop Selection'), |
| | 62 | __('Once started, the selection can be adjusted by entering new values (in pixels). Note that these values are scaled to approximately match the original image dimensions. The minimum selection size equals the thumbnail size as set in the Media settings.') |
| | 63 | ) |
| | 64 | ); |
| | 65 | |
| 43 | | |
| 44 | | |
| 45 | | |
| 46 | | |
| 47 | | |
| 48 | | |
| 49 | | |
| 50 | | <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div> |
| 51 | | <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div> |
| 52 | | |
| | 105 | // On some setups GD library does not provide imagerotate() - Ticket #11536 |
| | 106 | if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?> |
| | 107 | <div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div> |
| | 108 | <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div> |
| | 109 | <?php } else { |
| | 110 | $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.'); |
| | 111 | ?> |
| | 112 | <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div> |
| | 113 | <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div> |
| | 114 | <?php } ?> |
| 132 | | |
| 133 | | <p> |
| 134 | | <?php _e('Aspect ratio:'); ?> |
| 135 | | <span class="nowrap"> |
| 136 | | <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" /> |
| 137 | | : |
| 138 | | <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> |
| 139 | | </span> |
| 140 | | </p> |
| 141 | | |
| 142 | | <p id="imgedit-crop-sel-<?php echo $post_id; ?>"> |
| 143 | | <?php _e('Selection:'); ?> |
| 144 | | <span class="nowrap"> |
| 145 | | <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> |
| 146 | | : |
| 147 | | <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> |
| 148 | | </span> |
| 149 | | </p> |
| 150 | | </div> |
| 151 | | |
| 152 | | <?php if ( $thumb && $sub_sizes ) { |
| 153 | | $thumb_img = wp_constrain_dimensions( $thumb['width'], $thumb['height'], 160, 120 ); |
| 154 | | ?> |
| 155 | | |
| 156 | | <div class="imgedit-group imgedit-applyto"> |
| 157 | | <div class="imgedit-group-top"> |
| 158 | | <strong><?php _e('Thumbnail Settings'); ?></strong> |
| 159 | | <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('(help)'); ?></a> |
| 160 | | <p class="imgedit-help"><?php _e('The thumbnail image can be cropped differently. For example it can be square or contain only a portion of the original image to showcase it better. Here you can select whether to apply changes to all image sizes or make the thumbnail different.'); ?></p> |
| 161 | | </div> |
| 162 | | |
| 163 | | <p> |
| 164 | | <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" /><br /><?php _e('Current thumbnail'); ?> |
| 165 | | </p> |
| 166 | | |
| 167 | | <p id="imgedit-save-target-<?php echo $post_id; ?>"> |
| 168 | | <strong><?php _e('Apply changes to:'); ?></strong><br /> |
| 169 | | |
| 170 | | <label class="imgedit-label"> |
| 171 | | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" /> |
| 172 | | <?php _e('All image sizes'); ?></label> |
| 173 | | |
| 174 | | <label class="imgedit-label"> |
| 175 | | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" /> |
| 176 | | <?php _e('Thumbnail'); ?></label> |
| 177 | | |
| 178 | | <label class="imgedit-label"> |
| 179 | | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> |
| 180 | | <?php _e('All sizes except thumbnail'); ?></label> |
| 181 | | </p> |
| 182 | | </div> |
| 183 | | |
| 184 | | <?php } ?> |
| 185 | | |
| 186 | | </td></tr> |
| 187 | | </tbody></table> |
| 188 | | <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div> |
| 189 | | <script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script> |
| 190 | | <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div> |
| 191 | | </div> |
| | 722 | |
| | 723 | /** |
| | 724 | * Adds a new image editor group to the Edit Image view. |
| | 725 | * |
| | 726 | * Should be called before {@link do_image_edit_groups()}, preferably from a 'add_image_edit_group' action callback. |
| | 727 | * |
| | 728 | * @global array $image_editor_groups |
| | 729 | * |
| | 730 | * @param int $id Unique ID for this editor group |
| | 731 | * @param string $title Title that appears in the editor group box |
| | 732 | * @param string|array $callback Function to be called to render the editor group content. Function signature is `( $post_id, $imgedit_group, $args )` |
| | 733 | * @param string $tab Optional. Default "default". The name of the tab this group appears in |
| | 734 | * @param string $help_text Optional. Help text that appears in the editor box content |
| | 735 | * @param string $class Optional. CSS class to be added to the editor group DIV |
| | 736 | * @param array $callback_args Optional. Additional arguments to be passed to the callback function. |
| | 737 | */ |
| | 738 | function add_image_edit_group( $id, $title, $callback, $tab = "default", $help_text = "", $class = "", $callback_args = null ){ |
| | 739 | global $image_editor_groups; |
| | 740 | |
| | 741 | /** @TODO make sure $id is unique **/ |
| | 742 | $image_editor_groups[$tab][$id] = array( |
| | 743 | 'id' => $id, |
| | 744 | 'title' => $title, |
| | 745 | 'callback' => $callback, |
| | 746 | 'class' => $class, |
| | 747 | 'help' => $help_text, |
| | 748 | 'callback_args' => $callback_args |
| | 749 | ); |
| | 750 | } |
| | 751 | |
| | 752 | function remove_image_edit_group( $remove_id ){ |
| | 753 | global $image_editor_groups; |
| | 754 | |
| | 755 | foreach ( $image_editor_groups as $tab_group => &$groups ){ |
| | 756 | foreach ( $groups as $id => $group ){ |
| | 757 | if ( $id == $remove_id ){ |
| | 758 | unset ( $groups[$id] ); |
| | 759 | return true; |
| | 760 | } |
| | 761 | } |
| | 762 | } |
| | 763 | return false; |
| | 764 | } |
| | 765 | |
| | 766 | function imgedit_group_scale_image( $post_id, $imgedit_group, $args ){ |
| | 767 | extract( $args ); |
| | 768 | ?> |
| | 769 | |
| | 770 | <?php if ( isset( $meta['width'], $meta['height'] ) ): ?> |
| | 771 | <p><?php printf( __('Original dimensions %s'), $meta['width'] . '×' . $meta['height'] ); ?></p> |
| | 772 | <?php endif ?> |
| | 773 | <div class="imgedit-submit"> |
| | 774 | <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; ?>" /> |
| | 775 | <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span> |
| | 776 | <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /> |
| | 777 | </div> |
| | 778 | </div> |
| | 779 | |
| | 780 | <?php |
| | 781 | } |
| | 782 | |
| | 783 | function imgedit_group_crop_image( $post_id, $imgedit_group, $args ){ |
| | 784 | extract( $args ); |
| | 785 | ?> |
| | 786 | <p> |
| | 787 | <?php _e('Aspect ratio:'); ?> |
| | 788 | <span class="nowrap"> |
| | 789 | <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" /> |
| | 790 | : |
| | 791 | <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> |
| | 792 | </span> |
| | 793 | </p> |
| | 794 | |
| | 795 | <p id="imgedit-crop-sel-<?php echo $post_id; ?>"> |
| | 796 | <?php _e('Selection:'); ?> |
| | 797 | <span class="nowrap"> |
| | 798 | <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> |
| | 799 | × |
| | 800 | <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> |
| | 801 | </span> |
| | 802 | </p> |
| | 803 | <?php |
| | 804 | } |
| | 805 | |
| | 806 | function imgedit_group_thumbnail_settings( $post_id, $imgedit_group, $args ){ |
| | 807 | extract( $args ); |
| | 808 | ?> |
| | 809 | |
| | 810 | <?php if ( isset( $thumb ) ): ?> |
| | 811 | <p> |
| | 812 | <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" /><br /><?php _e('Current thumbnail'); ?> |
| | 813 | </p> |
| | 814 | <?php endif; ?> |
| | 815 | |
| | 816 | <p id="imgedit-save-target-<?php echo $post_id; ?>"> |
| | 817 | <strong><?php _e('Apply changes to:'); ?></strong><br /> |
| | 818 | |
| | 819 | <label class="imgedit-label"> |
| | 820 | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" /> |
| | 821 | <?php _e('All image sizes'); ?></label> |
| | 822 | |
| | 823 | <label class="imgedit-label"> |
| | 824 | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" /> |
| | 825 | <?php _e('Thumbnail'); ?></label> |
| | 826 | |
| | 827 | <label class="imgedit-label"> |
| | 828 | <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> |
| | 829 | <?php _e('All sizes except thumbnail'); ?></label> |
| | 830 | </p> |
| | 831 | |
| | 832 | <?php |
| | 833 | } |
| | 834 | |
| | 835 | function imgedit_group_restore_image( $post_id, $imgedit_group, $args ){ |
| | 836 | extract( $args ); |
| | 837 | ?> |
| | 838 | |
| | 839 | <p> |
| | 840 | <?php |
| | 841 | if ( !defined('IMAGE_EDIT_OVERWRITE') || !IMAGE_EDIT_OVERWRITE ) |
| | 842 | echo ' '.__('Previously edited copies of the image will not be deleted.'); |
| | 843 | ?> |
| | 844 | </p> |
| | 845 | |
| | 846 | <div class="imgedit-submit"> |
| | 847 | <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" /> |
| | 848 | </div> |
| | 849 | |
| | 850 | <?php |
| | 851 | } |
| | 852 | |
| | 853 | /** |
| | 854 | * @global array $image_editor_groups |
| | 855 | * |
| | 856 | * @param int $post_id |
| | 857 | * @param string $nonce |
| | 858 | * |
| | 859 | * @TODO Currently, tabs auto-create themselves just by defining them in add_image_edit_group(). Eventually we'll want a add_editor_tab() suite of functions so we can better control these tabs. |
| | 860 | */ |
| | 861 | function do_image_edit_groups( $post_id, $nonce ){ |
| | 862 | global $image_editor_groups; |
| | 863 | |
| | 864 | /** |
| | 865 | * Allow modification of image editor groups. |
| | 866 | * |
| | 867 | * @since 3.9 |
| | 868 | * |
| | 869 | * @param int $post_id The ID of the WP_Post (attachment) currently being edited. |
| | 870 | */ |
| | 871 | $editor_groups = apply_filters( 'image_editor_groups', $image_editor_groups, $post_id ); |
| | 872 | |
| | 873 | // Only create the tabs structure if needed |
| | 874 | $has_tabs = count( $editor_groups ) > 1; |
| | 875 | |
| | 876 | if ( $has_tabs ){ |
| | 877 | echo '<div id="image-editor-group-tabs"><ul>'; |
| | 878 | |
| | 879 | foreach ( $editor_groups as $tab => $tab_groups ){ |
| | 880 | if ( $has_tabs ){ |
| | 881 | $tab_title = str_replace( array( '-', '_' ), ' ', strtoupper( $tab ) ); |
| | 882 | echo '<li><a href="#imgedit-group-tab-' . $tab . '">' . $tab_title . '</a></li>'; |
| | 883 | } |
| | 884 | } |
| | 885 | |
| | 886 | echo '</ul>'; |
| | 887 | } |
| | 888 | |
| | 889 | foreach ( $editor_groups as $tab => $tab_groups ){ |
| | 890 | if ( $has_tabs ) echo '<div id="#imgedit-group-tab-' . $tab . '">'; |
| | 891 | |
| | 892 | foreach ( $tab_groups as $imgedit_group ){ |
| | 893 | ?> |
| | 894 | <div class="imgedit-group <?php echo $imgedit_group['class']?>"> |
| | 895 | <div class="imgedit-group-top"> |
| | 896 | <strong><?php echo $imgedit_group['title'] ?></strong> |
| | 897 | <?php if ( ! empty( $imgedit_group['help'] ) ): ?> |
| | 898 | <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('(help)'); ?></a> |
| | 899 | <div class="imgedit-help"><?php echo $imgedit_group['help'] ?></div> |
| | 900 | <?php endif; ?> |
| | 901 | </div> |
| | 902 | |
| | 903 | <?php |
| | 904 | $imgedit_group['callback_args']['nonce'] = $nonce; // Add the nonce to the callback args of each item, in case it has a submit button |
| | 905 | call_user_func( $imgedit_group['callback'], $post_id, $imgedit_group, $imgedit_group['callback_args'] ); |
| | 906 | ?> |
| | 907 | |
| | 908 | </div> |
| | 909 | <?php |
| | 910 | } |
| | 911 | |
| | 912 | if ( $has_tabs ) echo '</div><!-- /#imgedit-group-tab-' . $tab . ' -->'; |
| | 913 | } |
| | 914 | |
| | 915 | if ( $has_tabs ) { |
| | 916 | echo '</div><!-- /#image-editor-group-tabs -->'; |
| | 917 | ?> |
| | 918 | <script>jQuery( '#image-editor-group-tabs' ).tabs();</script> |
| | 919 | <?php |
| | 920 | } |
| | 921 | |
| | 922 | } |