wp-admin/custom-header.php

   1 <?php
   2 /**
   3  * The custom header image script.
   4  *
   5  * @package WordPress
   6  * @subpackage Administration
   7  */
   8
   9 /**
  10  * The custom header image class.
  11  *
  12  * @since unknown
  13  * @package WordPress
  14  * @subpackage Administration
  15  */
  16 class Custom_Image_Header {
  17
  18         /**
  19          * Callback for administration header.
  20          *
  21          * @var callback
  22          * @since unknown
  23          * @access private
  24          */
  25         var $admin_header_callback;
  26
  27         /**
  28          * PHP4 Constructor - Register administration header callback.
  29          *
  30          * @since unknown
  31          * @param callback $admin_header_callback
  32          * @return Custom_Image_Header
  33          */
  34         function Custom_Image_Header($admin_header_callback) {
  35                 $this->admin_header_callback = $admin_header_callback;
  36         }
  37
  38         /**
  39          * Setup the hooks for the Custom Header admin page.
  40          *
  41          * @since unknown
  42          */
  43         function init() {
  44                 $page = add_theme_page(__('Custom Header'), __('Custom Header'), 'edit_themes', 'custom-header', array(&$this, 'admin_page'));
  45
  46                 add_action("admin_print_scripts-$page", array(&$this, 'js_includes'));
  47                 add_action("admin_print_styles-$page", array(&$this, 'css_includes'));
  48                 add_action("admin_head-$page", array(&$this, 'take_action'), 50);
  49                 add_action("admin_head-$page", array(&$this, 'js'), 50);
  50                 add_action("admin_head-$page", $this->admin_header_callback, 51);
  51         }
  52
  53         /**
  54          * Get the current step.
  55          *
  56          * @since unknown
  57          *
  58          * @return int Current step
  59          */
  60         function step() {
  61                 if ( ! isset( $_GET['step'] ) )
  62                         return 1;
  63
  64                 $step = (int) $_GET['step'];
  65                 if ( $step < 1 || 3 < $step )
  66                         $step = 1;
  67
  68                 return $step;
  69         }
  70
  71         /**
  72          * Setup the enqueue for the JavaScript files.
  73          *
  74          * @since unknown
  75          */
  76         function js_includes() {
  77                 $step = $this->step();
  78
  79                 if ( 1 == $step )
  80                         wp_enqueue_script('farbtastic');
  81                 elseif ( 2 == $step )
  82                         wp_enqueue_script('jcrop');
  83         }
  84
  85         /**
  86          * Setup the enqueue for the CSS files
  87          *
  88          * @since 2.7
  89          */
  90         function css_includes() {
  91                 $step = $this->step();
  92
  93                 if ( 1 == $step )
  94                         wp_enqueue_style('farbtastic');
  95                 elseif ( 2 == $step )
  96                         wp_enqueue_style('jcrop');
  97         }
  98
  99         /**
 100          * Execute custom header modification.
 101          *
 102          * @since unknown
 103          */
 104         function take_action() {
 105                 if ( isset( $_POST['textcolor'] ) ) {
 106                         check_admin_referer('custom-header');
 107                         if ( 'blank' == $_POST['textcolor'] ) {
 108                                 set_theme_mod('header_textcolor', 'blank');
 109                         } else {
 110                                 $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['textcolor']);
 111                                 if ( strlen($color) == 6 || strlen($color) == 3 )
 112                                         set_theme_mod('header_textcolor', $color);
 113                         }
 114                 }
 115                 if ( isset($_POST['resetheader']) ) {
 116                         check_admin_referer('custom-header');
 117                         remove_theme_mods();
 118                 }
 119         }
 120
 121         /**
 122          * Execute Javascript depending on step.
 123          *
 124          * @since unknown
 125          */
 126         function js() {
 127                 $step = $this->step();
 128                 if ( 1 == $step )
 129                         $this->js_1();
 130                 elseif ( 2 == $step )
 131                         $this->js_2();
 132         }
 133
 134         /**
 135          * Display Javascript based on Step 1.
 136          *
 137          * @since unknown
 138          */
 139         function js_1() { ?>
 140 <script type="text/javascript">
 141         var buttons = ['#name', '#desc', '#pickcolor', '#defaultcolor'];
 142         var farbtastic;
 143
 144         function pickColor(color) {
 145                 jQuery('#name').css('color', color);
 146                 jQuery('#desc').css('color', color);
 147                 jQuery('#textcolor').val(color);
 148                 farbtastic.setColor(color);
 149         }
 150
 151         jQuery(document).ready(function() {
 152                 jQuery('#pickcolor').click(function() {
 153                         jQuery('#colorPickerDiv').show();
 154                 });
 155
 156                 jQuery('#hidetext').click(function() {
 157                         toggle_text();
 158                 });
 159
 160                 farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); });
 161                 pickColor('#<?php echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR); ?>');
 162
 163                 <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
 164                 toggle_text();
 165                 <?php } ?>
 166         });
 167
 168         jQuery(document).mousedown(function(){
 169                 // Make the picker disappear, since we're using it in an independant div
 170                 hide_picker();
 171         });
 172
 173         function colorDefault() {
 174                 pickColor('#<?php echo HEADER_TEXTCOLOR; ?>');
 175         }
 176
 177         function hide_picker(what) {
 178                 var update = false;
 179                 jQuery('#colorPickerDiv').each(function(){
 180                         var id = jQuery(this).attr('id');
 181                         if (id == what) {
 182                                 return;
 183                         }
 184                         var display = jQuery(this).css('display');
 185                         if (display == 'block') {
 186                                 jQuery(this).fadeOut(2);
 187                         }
 188                 });
 189         }
 190
 191         function toggle_text(force) {
 192                 if(jQuery('#textcolor').val() == 'blank') {
 193                         //Show text
 194                         jQuery( buttons.toString() ).show();
 195                         jQuery('#textcolor').val('<?php echo HEADER_TEXTCOLOR; ?>');
 196                         jQuery('#hidetext').val('<?php _e('Hide Text'); ?>');
 197                 }
 198                 else {
 199                         //Hide text
 200                         jQuery( buttons.toString() ).hide();
 201                         jQuery('#textcolor').val('blank');
 202                         jQuery('#hidetext').val('<?php _e('Show Text'); ?>');
 203                 }
 204         }
 205
 206
 207
 208 </script>
 209 <?php
 210         }
 211
 212         /**
 213          * Display Javascript based on Step 2.
 214          *
 215          * @since unknown
 216          */
 217         function js_2() { ?>
 218 <script type="text/javascript">
 219         function onEndCrop( coords ) {
 220                 jQuery( '#x1' ).val(coords.x);
 221                 jQuery( '#y1' ).val(coords.y);
 222                 jQuery( '#x2' ).val(coords.x2);
 223                 jQuery( '#y2' ).val(coords.y2);
 224                 jQuery( '#width' ).val(coords.w);
 225                 jQuery( '#height' ).val(coords.h);
 226         }
 227
 228         // with a supplied ratio
 229         jQuery(document).ready(function() {
 230                 var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
 231                 var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
 232                 var ratio = xinit / yinit;
 233                 var ximg = jQuery('#upload').width();
 234                 var yimg = jQuery('#upload').height();
 235
 236                 //set up default values
 237                 jQuery( '#x1' ).val(0);
 238                 jQuery( '#y1' ).val(0);
 239                 jQuery( '#x2' ).val(xinit);
 240                 jQuery( '#y2' ).val(yinit);
 241                 jQuery( '#width' ).val(xinit);
 242                 jQuery( '#height' ).val(yinit);
 243
 244                 if ( yimg < yinit || ximg < xinit ) {
 245                         if ( ximg / yimg > ratio ) {
 246                                 yinit = yimg;
 247                                 xinit = yinit * ratio;
 248                         } else {
 249                                 xinit = ximg;
 250                                 yinit = xinit / ratio;
 251                         }
 252                 }
 253
 254                 jQuery('#upload').Jcrop({
 255                         aspectRatio: ratio,
 256                         setSelect: [ 0, 0, xinit, yinit ],
 257                         onSelect: onEndCrop
 258                 });
 259         });
 260 </script>
 261 <?php
 262         }
 263
 264         /**
 265          * Display first step of custom header image page.
 266          *
 267          * @since unknown
 268          */
 269         function step_1() {
 270                 if ( $_GET['updated'] ) { ?>
 271 <div id="message" class="updated fade">
 272 <p><?php _e('Header updated.') ?></p>
 273 </div>
 274                 <?php } ?>
 275
 276 <div class="wrap">
 277 <?php screen_icon(); ?>
 278 <h2><?php _e('Your Header Image'); ?></h2>
 279 <p><?php _e('This is your header image. You can change the text color or upload and crop a new image.'); ?></p>
 280
 281 <div id="headimg" style="background-image: url(<?php esc_url(header_image()) ?>);">
 282 <h1><a onclick="return false;" href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" id="name"><?php bloginfo('name'); ?></a></h1>
 283 <div id="desc"><?php bloginfo('description');?></div>
 284 </div>
 285 <?php if ( !defined( 'NO_HEADER_TEXT' ) ) { ?>
 286 <form method="post" action="<?php echo admin_url('themes.php?page=custom-header&amp;updated=true') ?>">
 287 <input type="button" class="button" value="<?php esc_attr_e('Hide Text'); ?>" onclick="hide_text()" id="hidetext" />
 288 <input type="button" class="button" value="<?php esc_attr_e('Select a Text Color'); ?>" id="pickcolor" /><input type="button" class="button" value="<?php esc_attr_e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" />
 289 <?php wp_nonce_field('custom-header') ?>
 290 <input type="hidden" name="textcolor" id="textcolor" value="#<?php esc_attr(header_textcolor()) ?>" /><input name="submit" type="submit" class="button" value="<?php esc_attr_e('Save Changes'); ?>" /></form>
 291 <?php } ?>
 292
 293 <div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;display:none;"> </div>
 294 </div>
 295 <div class="wrap">
 296 <h2><?php _e('Upload New Header Image'); ?></h2><p><?php _e('Here you can upload a custom header image to be shown at the top of your blog instead of the default one. On the next screen you will be able to crop the image.'); ?></p>
 297 <p><?php printf(__('Images of exactly <strong>%1$d x %2$d pixels</strong> will be used as-is.'), HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT); ?></p>
 298
 299 <form enctype="multipart/form-data" id="uploadForm" method="POST" action="<?php echo esc_attr(add_query_arg('step', 2)) ?>" style="margin: auto; width: 50%;">
 300 <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
 301 <input type="hidden" name="action" value="save" />
 302 <?php wp_nonce_field('custom-header') ?>
 303 <p class="submit">
 304 <input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
 305 </p>
 306 </form>
 307
 308 </div>
 309
 310                 <?php if ( get_theme_mod('header_image') || get_theme_mod('header_textcolor') ) : ?>
 311 <div class="wrap">
 312 <h2><?php _e('Reset Header Image and Color'); ?></h2>
 313 <p><?php _e('This will restore the original header image and color. You will not be able to retrieve any customizations.') ?></p>
 314 <form method="post" action="<?php echo esc_attr(add_query_arg('step', 1)) ?>">
 315 <?php wp_nonce_field('custom-header'); ?>
 316 <input type="submit" class="button" name="resetheader" value="<?php esc_attr_e('Restore Original Header'); ?>" />
 317 </form>
 318 </div>
 319                 <?php endif;
 320
 321         }
 322
 323         /**
 324          * Display second step of custom header image page.
 325          *
 326          * @since unknown
 327          */
 328         function step_2() {
 329                 check_admin_referer('custom-header');
 330                 $overrides = array('test_form' => false);
 331                 $file = wp_handle_upload($_FILES['import'], $overrides);
 332
 333                 if ( isset($file['error']) )
 334                 die( $file['error'] );
 335
 336                 $url = $file['url'];
 337                 $type = $file['type'];
 338                 $file = $file['file'];
 339                 $filename = basename($file);
 340
 341                 // Construct the object array
 342                 $object = array(
 343                 'post_title' => $filename,
 344                 'post_content' => $url,
 345                 'post_mime_type' => $type,
 346                 'guid' => $url);
 347
 348                 // Save the data
 349                 $id = wp_insert_attachment($object, $file);
 350
 351                 list($width, $height, $type, $attr) = getimagesize( $file );
 352
 353                 if ( $width == HEADER_IMAGE_WIDTH && $height == HEADER_IMAGE_HEIGHT ) {
 354                         // Add the meta-data
 355                         wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
 356
 357                         set_theme_mod('header_image', esc_url($url));
 358                         do_action('wp_create_file_in_uploads', $file, $id); // For replication
 359                         return $this->finished();
 360                 } elseif ( $width > HEADER_IMAGE_WIDTH ) {
 361                         $oitar = $width / HEADER_IMAGE_WIDTH;
 362                         $image = wp_crop_image($file, 0, 0, $width, $height, HEADER_IMAGE_WIDTH, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
 363                         $image = apply_filters('wp_create_file_in_uploads', $image, $id); // For replication
 364
 365                         $url = str_replace(basename($url), basename($image), $url);
 366                         $width = $width / $oitar;
 367                         $height = $height / $oitar;
 368                 } else {
 369                         $oitar = 1;
 370                 }
 371                 ?>
 372
 373 <div class="wrap">
 374
 375 <form method="POST" action="<?php echo esc_attr(add_query_arg('step', 3)) ?>">
 376
 377 <p><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
 378 <div id="testWrap" style="position: relative">
 379 <img src="<?php echo $url; ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
 380 </div>
 381
 382 <p class="submit">
 383 <input type="hidden" name="x1" id="x1" />
 384 <input type="hidden" name="y1" id="y1" />
 385 <input type="hidden" name="x2" id="x2" />
 386 <input type="hidden" name="y2" id="y2" />
 387 <input type="hidden" name="width" id="width" />
 388 <input type="hidden" name="height" id="height" />
 389 <input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo esc_attr($id); ?>" />
 390 <input type="hidden" name="oitar" id="oitar" value="<?php echo esc_attr($oitar); ?>" />
 391 <?php wp_nonce_field('custom-header') ?>
 392 <input type="submit" value="<?php esc_attr_e('Crop Header'); ?>" />
 393 </p>
 394
 395 </form>
 396 </div>
 397                 <?php
 398         }
 399
 400         /**
 401          * Display third step of custom header image page.
 402          *
 403          * @since unknown
 404          */
 405         function step_3() {
 406                 check_admin_referer('custom-header');
 407                 if ( $_POST['oitar'] > 1 ) {
 408                         $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
 409                         $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
 410                         $_POST['width'] = $_POST['width'] * $_POST['oitar'];
 411                         $_POST['height'] = $_POST['height'] * $_POST['oitar'];
 412                 }
 413
 414                 $original = get_attached_file( $_POST['attachment_id'] );
 415
 416                 $cropped = wp_crop_image($_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT);
 417                 $cropped = apply_filters('wp_create_file_in_uploads', $cropped, $_POST['attachment_id']); // For replication
 418
 419                 $parent = get_post($_POST['attachment_id']);
 420                 $parent_url = $parent->guid;
 421                 $url = str_replace(basename($parent_url), basename($cropped), $parent_url);
 422
 423                 // Construct the object array
 424                 $object = array(
 425                         'ID' => $_POST['attachment_id'],
 426                         'post_title' => basename($cropped),
 427                         'post_content' => $url,
 428                         'post_mime_type' => 'image/jpeg',
 429                         'guid' => $url
 430                 );
 431
 432                 // Update the attachment
 433                 wp_insert_attachment($object, $cropped);
 434                 wp_update_attachment_metadata( $_POST['attachment_id'], wp_generate_attachment_metadata( $_POST['attachment_id'], $cropped ) );
 435
 436                 set_theme_mod('header_image', $url);
 437
 438                 // cleanup
 439                 $medium = str_replace(basename($original), 'midsize-'.basename($original), $original);
 440                 @unlink( apply_filters( 'wp_delete_file', $medium ) );
 441                 @unlink( apply_filters( 'wp_delete_file', $original ) );
 442
 443                 return $this->finished();
 444         }
 445
 446         /**
 447          * Display last step of custom header image page.
 448          *
 449          * @since unknown
 450          */
 451         function finished() {
 452                 ?>
 453 <div class="wrap">
 454 <h2><?php _e('Header complete!'); ?></h2>
 455
 456 <p><?php _e('Visit your site and you should see the new header now.'); ?></p>
 457
 458 </div>
 459                 <?php
 460         }
 461
 462         /**
 463          * Display the page based on the current step.
 464          *
 465          * @since unknown
 466          */
 467         function admin_page() {
 468                 $step = $this->step();
 469                 if ( 1 == $step )
 470                         $this->step_1();
 471                 elseif ( 2 == $step )
 472                         $this->step_2();
 473                 elseif ( 3 == $step )
 474                         $this->step_3();
 475         }
 476
 477 }
 478 ?>