Make WordPress Core

Ticket #3465: custom-header.diff

File custom-header.diff, 12.0 KB (added by ryan, 19 years ago)

Custom Image Header Support

  • wp-includes/theme.php

     
    461461        delete_option("mods_$theme");
    462462}
    463463
     464function header_textcolor() {
     465        echo get_theme_mod('header_textcolor', HEADER_TEXTCOLOR);
     466}
     467
     468function header_image() {
     469        echo get_theme_mod('header_image', HEADER_IMAGE);
     470}
     471
     472function add_custom_header_admin_page($admin_header_callback) {
     473        if ( ! is_admin() )
     474                return;
     475        global $customheader;
     476        require_once('./custom-header.php');
     477        $customheader =& new CustomHeader($admin_header_callback);
     478        add_action('admin_menu', array($customheader, 'init'));
     479}
     480
    464481?>
     482 No newline at end of file
  • wp-admin/admin-functions.php

     
    20452045                $file = get_attached_file( $file );
    20462046
    20472047        if ( !file_exists( $file ) )
    2048                 return "File '$file' doesn't exist?";
     2048                return sprintf(__("File '%s' doesn't exist?"), $file);
    20492049
     2050        if ( ! function_exists('imagecreatefromstring') )
     2051                return __('The GD image library is not installed.');
     2052
    20502053        $contents = file_get_contents( $file );
    20512054
    20522055        $image = imagecreatefromstring( $contents );
    20532056
    20542057        if ( !is_resource( $image ) )
    2055                 return "File '$file' is not image?";
     2058                return sprintf(__("File '%s' is not an image."), $file);
    20562059
    20572060        return $image;
    20582061}
  • wp-admin/custom-header.php

     
     1<?php
     2
     3class CustomHeader {
     4        var $admin_header_callback;
     5
     6        function CustomHeader($admin_header_callback) {
     7                $this->admin_header_callback = $admin_header_callback;
     8        }
     9
     10        function init() {
     11                $page = add_theme_page(__('Custom Image Header'), __('Custom Image Header'), 'edit_themes', 'custom-header', array($this, 'admin_page'));
     12
     13                add_action("admin_print_scripts-$page", array($this, 'js_includes'));
     14                add_action("admin_head-$page", array($this, 'js'), 50);
     15                add_action("admin_head-$page", $this->admin_header_callback, 51);
     16        }
     17
     18        function js_includes() {
     19                wp_enqueue_script('cropper');
     20                wp_enqueue_script('colorpicker');       
     21        }
     22
     23        function js() {
     24
     25                if ( isset( $_POST['textcolor'] ) ) {
     26                        if ( 'blank' == $_POST['textcolor'] ) {
     27                                set_theme_mod('header_textcolor', 'blank');
     28                        } else {
     29                                $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['textcolor']);
     30                                if ( strlen($color) == 6 || strlen($color) == 3 )
     31                                        set_theme_mod('header_textcolor', $color);
     32                        }
     33                }
     34                if ( isset($_POST['resetheader']) )
     35                        remove_theme_mods();
     36        ?>
     37<script type="text/javascript">
     38
     39        function onEndCrop( coords, dimensions ) {
     40                $( 'x1' ).value = coords.x1;
     41                $( 'y1' ).value = coords.y1;
     42                $( 'x2' ).value = coords.x2;
     43                $( 'y2' ).value = coords.y2;
     44                $( 'width' ).value = dimensions.width;
     45                $( 'height' ).value = dimensions.height;
     46        }
     47
     48        // with a supplied ratio
     49        Event.observe(
     50                window,
     51                'load',
     52                function() {
     53                        var xinit = <?php echo HEADER_IMAGE_WIDTH; ?>;
     54                        var yinit = <?php echo HEADER_IMAGE_HEIGHT; ?>;
     55                        var ratio = xinit / yinit;
     56                        var ximg = $('upload').width;
     57                        var yimg = $('upload').height;
     58                        if ( yimg < yinit || ximg < xinit ) {
     59                                if ( ximg / yimg > ratio ) {
     60                                        yinit = yimg;
     61                                        xinit = yinit * ratio;
     62                                } else {
     63                                        xinit = ximg;
     64                                        yinit = xinit / ratio;
     65                                }
     66                        }
     67                        new Cropper.Img(
     68                                'upload',
     69                                {
     70                                        ratioDim: { x: xinit, y: yinit },
     71                                        displayOnInit: true,
     72                                        onEndCrop: onEndCrop
     73                                }
     74                        )
     75                }
     76        );
     77
     78        var cp = new ColorPicker();
     79
     80        function pickColor(color) {
     81                $('name').style.color = color;
     82                $('desc').style.color = color;
     83                $('textcolor').value = color;
     84        }
     85        function PopupWindow_hidePopup(magicword) {
     86                if ( magicword != 'prettyplease' )
     87                        return false;
     88                if (this.divName != null) {
     89                        if (this.use_gebi) {
     90                                document.getElementById(this.divName).style.visibility = "hidden";
     91                        }
     92                        else if (this.use_css) {
     93                                document.all[this.divName].style.visibility = "hidden";
     94                        }
     95                        else if (this.use_layers) {
     96                                document.layers[this.divName].visibility = "hidden";
     97                        }
     98                }
     99                else {
     100                        if (this.popupWindow && !this.popupWindow.closed) {
     101                                this.popupWindow.close();
     102                                this.popupWindow = null;
     103                        }
     104                }
     105                return false;
     106        }
     107        function colorSelect(t,p) {
     108                if ( cp.p == p && document.getElementById(cp.divName).style.visibility != "hidden" ) {
     109                        cp.hidePopup('prettyplease');
     110                } else {
     111                        cp.p = p;
     112                        cp.select(t,p);
     113                }
     114        }
     115        function colorDefault() {
     116                pickColor('<?php echo HEADER_TEXTCOLOR; ?>');
     117        }
     118       
     119        function hide_text() {
     120                $('name').style.display = 'none';
     121                $('desc').style.display = 'none';
     122                $('pickcolor').style.display = 'none';
     123                $('defaultcolor').style.display = 'none';
     124                $('textcolor').value = 'blank';
     125                $('hidetext').value = '<?php _e('Show Text'); ?>';
     126//              $('hidetext').onclick = 'show_text()';
     127                Event.observe( $('hidetext'), 'click', show_text );
     128        }
     129       
     130        function show_text() {
     131                $('name').style.display = 'block';
     132                $('desc').style.display = 'block';
     133                $('pickcolor').style.display = 'inline';
     134                $('defaultcolor').style.display = 'inline';
     135                $('textcolor').value = '<?php echo HEADER_TEXTCOLOR; ?>';
     136                $('hidetext').value = '<?php _e('Hide Text'); ?>';
     137                Event.stopObserving( $('hidetext'), 'click', show_text );       
     138                Event.observe( $('hidetext'), 'click', hide_text );
     139        }
     140
     141        <?php if ( 'blank' == get_theme_mod('header_textcolor', HEADER_TEXTCOLOR) ) { ?>
     142Event.observe( window, 'load', hide_text );
     143        <?php } ?>
     144
     145</script>
     146<?php
     147        }
     148
     149        function step_1() {
     150                if ( $_GET['updated'] ) { ?>
     151<div id="message" class="updated fade">
     152<p><?php _e('Header updated.') ?></p>
     153</div>
     154                <?php } ?>
     155
     156<div class="wrap">
     157<h2><?php _e('Your Header Image'); ?></h2>
     158<p><?php _e('This is your header image. You can change the text color or upload and crop a new image.'); ?></p>
     159
     160<div id="headimg" style="background: url(<?php header_image() ?>) no-repeat;">
     161<h1><a onclick="return false;" href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" id="name"><?php bloginfo('name'); ?></a></h1>
     162<div id="desc"><?php bloginfo('description');?></div>
     163</div>
     164<?php if ( !defined( 'NO_HEADER_TEXT' ) ) { ?>
     165<form method="post" action="/wp-admin/themes.php?page=custom-header&amp;updated=true">
     166<input type="button" value="<?php _e('Hide Text'); ?>" onclick="hide_text()" id="hidetext" />
     167<input type="button" value="<?php _e('Select a Text Color'); ?>" onclick="colorSelect($('textcolor'), 'pickcolor')" id="pickcolor" /><input type="button" value="<?php _e('Use Original Color'); ?>" onclick="colorDefault()" id="defaultcolor" />
     168<input type="hidden" name="textcolor" id="textcolor" value="#<?php header_textcolor() ?>" /><input name="submit" type="submit" value="<?php _e('Save Changes'); ?> &raquo;" /></form>
     169<?php } ?>
     170
     171<div id="colorPickerDiv" style="z-index: 100;background:#eee;border:1px solid #ccc;position:absolute;visibility:hidden;"> </div>
     172</div>
     173<div class="wrap">
     174<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>
     175<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>
     176
     177<form enctype="multipart/form-data" id="uploadForm" method="POST" action="<?php echo add_query_arg('step', 2) ?>" style="margin: auto; width: 50%;">
     178<label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
     179<input type="hidden" name="action" value="save" />
     180<p class="submit">
     181<input type="submit" value="<?php _e('Upload'); ?> &raquo;" />
     182</p>
     183</form>
     184
     185</div>
     186
     187                <?php if ( get_theme_mod('header_image') || get_theme_mod('header_textcolor') ) : ?>
     188<div class="wrap">
     189<h2><?php _e('Reset Header Image and Color'); ?></h2>
     190<p><?php _e('This will restore the original header image and color. You will not be able to retrieve any customizations.') ?></p>
     191<form method="post" action="<?php echo add_query_arg('step', 1) ?>">
     192<input type="submit" name="resetheader" value="<?php _e('Restore Original Header'); ?>" />
     193</form>
     194</div>
     195                <?php endif;
     196
     197        }
     198
     199        function step_2() {
     200                $overrides = array('test_form' => false);
     201                $file = wp_handle_upload($_FILES['import'], $overrides);
     202
     203                if ( isset($file['error']) )
     204                die( $file['error'] );
     205
     206                $url = $file['url'];
     207                $file = $file['file'];
     208                $filename = basename($file);
     209
     210                // Construct the object array
     211                $object = array(
     212                'post_title' => $filename,
     213                'post_content' => $url,
     214                'post_mime_type' => 'import',
     215                'guid' => $url);
     216
     217                // Save the data
     218                $id = wp_insert_attachment($object, $file);
     219
     220                $upload = array('file' => $file, 'id' => $id);
     221
     222                list($width, $height, $type, $attr) = getimagesize( $file );
     223
     224                if ( $width == HEADER_IMAGE_WIDTH && $height == HEADER_IMAGE_HEIGHT ) {
     225                        set_theme_mod('header_image', $url);
     226                        $header = apply_filters('wp_create_file_in_uploads', $header); // For replication
     227                        return $this->finished();
     228                } elseif ( $width > HEADER_IMAGE_WIDTH ) {
     229                        $oitar = $width / HEADER_IMAGE_WIDTH;
     230                        $image = wp_crop_image($file, 0, 0, $width, $height, HEADER_IMAGE_WIDTH, $height / $oitar, false, str_replace(basename($file), 'midsize-'.basename($file), $file));
     231                        $image = apply_filters('wp_create_file_in_uploads', $image); // For replication
     232
     233                        $url = str_replace(basename($url), basename($image), $url);
     234                        $width = $width / $oitar;
     235                        $height = $height / $oitar;
     236                } else {
     237                        $oitar = 1;
     238                }
     239                ?>
     240
     241<div class="wrap">
     242
     243<form method="POST" action="<?php echo add_query_arg('step', 3) ?>">
     244
     245<p><?php _e('Choose the part of the image you want to use as your header.'); ?></p>
     246<div id="testWrap">
     247<img src="<?php echo $url; ?>" id="upload" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />
     248</div>
     249
     250<p class="submit">
     251<input type="hidden" name="x1" id="x1" />
     252<input type="hidden" name="y1" id="y1" />
     253<input type="hidden" name="x2" id="x2" />
     254<input type="hidden" name="y2" id="y2" />
     255<input type="hidden" name="width" id="width" />
     256<input type="hidden" name="height" id="height" />
     257<input type="hidden" name="attachment_id" id="attachment_id" value="<?php echo $id; ?>" />
     258<input type="hidden" name="oitar" id="oitar" value="<?php echo $oitar; ?>" />
     259<input type="submit" value="<?php _e('Crop Header &raquo;'); ?>" />
     260</p>
     261
     262</form>
     263</div>
     264                <?php
     265        }
     266
     267        function step_3() {
     268                if ( $_POST['oitar'] > 1 ) {
     269                        $_POST['x1'] = $_POST['x1'] * $_POST['oitar'];
     270                        $_POST['y1'] = $_POST['y1'] * $_POST['oitar'];
     271                        $_POST['width'] = $_POST['width'] * $_POST['oitar'];
     272                        $_POST['height'] = $_POST['height'] * $_POST['oitar'];
     273                }
     274
     275                $header = wp_crop_image($_POST['attachment_id'], $_POST['x1'], $_POST['y1'], $_POST['width'], $_POST['height'], HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT);
     276                $header = apply_filters('wp_create_file_in_uploads', $header); // For replication
     277
     278                $parent = get_post($_POST['attachment_id']);
     279
     280                $parent_url = $parent->guid;
     281
     282                $url = str_replace(basename($parent_url), basename($header), $parent_url);
     283
     284                set_theme_mod('header_image', $url);
     285
     286                // cleanup
     287                $file = get_attached_file( $_POST['attachment_id'] );
     288                $medium = str_replace(basename($file), 'midsize-'.basename($file), $file);
     289                @unlink( $medium );
     290                apply_filters( 'wp_delete_file', $medium );
     291                wp_delete_attachment( $_POST['attachment_id'] );
     292
     293                return $this->finished();
     294        }
     295
     296        function finished() {
     297                ?>
     298<div class="wrap">
     299<h2><?php _e('Header complete!'); ?></h2>
     300
     301<p><?php _e('Visit your site and you should see the new header now.'); ?></p>
     302
     303</div>
     304                <?php
     305        }
     306
     307        function admin_page() {
     308                if ( !isset( $_GET['step'] ) )
     309                        $step = 1;
     310                else
     311                        $step = (int) $_GET['step'];
     312
     313                if ( 1 == $step ) {
     314                        $this->step_1();
     315                } elseif ( 2 == $step ) {
     316                        $this->step_2();
     317                } elseif ( 3 == $step ) {
     318                        $this->step_3();
     319                }
     320
     321        }
     322
     323}
     324?>