From f0088e38ebbff87996d76bd3acc4b0f49a718e4b Mon Sep 17 00:00:00 2001 From: dd32 Date: Sun, 28 Mar 2010 02:53:04 +0000 Subject: [PATCH] Add Repeat-x/repeat-y support to Custom Backgrounds, Add Live preview of Repeat option, Use Thumbnail of background for Background Preview. Props jshreve. See #12186 git-svn-id: http://svn.automattic.com/wordpress/trunk@13856 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-admin/css/wp-admin.dev.css | 2 +- wp-admin/custom-background.php | 40 ++++++++++++++++--------- wp-admin/js/custom-background.dev.js | 7 +++-- wp-admin/js/custom-background.js | 2 +- wp-includes/theme.php | 45 ++++++++++++++++------------ 5 files changed, 59 insertions(+), 37 deletions(-) diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css index 112075c16..182a97678 100644 --- a/wp-admin/css/wp-admin.dev.css +++ b/wp-admin/css/wp-admin.dev.css @@ -3650,7 +3650,7 @@ div#custom-background-image { div#custom-background-image img { max-width: 400px; - max-height: 200px; + max-height: 300px; } /* Custom Header */ diff --git a/wp-admin/custom-background.php b/wp-admin/custom-background.php index 323190c2a..3084ef1f4 100644 --- a/wp-admin/custom-background.php +++ b/wp-admin/custom-background.php @@ -98,7 +98,7 @@ class Custom_Background { } if ( isset($_POST['background-repeat']) ) { - if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat')) ) + if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) ) $repeat = $_POST['background-repeat']; else $repeat = 'repeat'; @@ -149,15 +149,23 @@ class Custom_Background { if ( $this->admin_image_div_callback ) { call_user_func($this->admin_image_div_callback); } else { - if ( $bgcolor = get_background_color() ) - $bgcolor = 'background-color: #' . $bgcolor . ';'; - - if ( $align = get_theme_mod('background_position', 'left') ) - $align = "text-align: $align;"; ?> -
+ + +
- +
+
@@ -192,12 +200,12 @@ class Custom_Background {
-
@@ -286,6 +294,10 @@ class Custom_Background { wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) ); set_theme_mod('background_image', esc_url($url)); + + $thumbnail = wp_get_attachment_image_src( $id, 'thumbnail' ); + set_theme_mod('background_image_thumb', esc_url( $thumbnail[0] ) ); + do_action('wp_create_file_in_uploads', $file, $id); // For replication $this->updated = true; } diff --git a/wp-admin/js/custom-background.dev.js b/wp-admin/js/custom-background.dev.js index e3d9c1d48..75890416f 100644 --- a/wp-admin/js/custom-background.dev.js +++ b/wp-admin/js/custom-background.dev.js @@ -22,9 +22,12 @@ jQuery(document).ready(function() { pickColor( hex ); }); jQuery('input[name="background-position"]').change(function() { - jQuery('#custom-background-image').css('text-align', jQuery(this).val()); + jQuery('#custom-background-image').css('background-position', 'top '+jQuery(this).val()); }); - + jQuery('select[name="background-repeat"]').change(function() { + jQuery('#custom-background-image').css('background-repeat', jQuery(this).val()); + }); + farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) { pickColor(color); }); diff --git a/wp-admin/js/custom-background.js b/wp-admin/js/custom-background.js index 1d6e66b51..1bdee366f 100644 --- a/wp-admin/js/custom-background.js +++ b/wp-admin/js/custom-background.js @@ -1 +1 @@ -var buttons=["#pickcolor"],farbtastic;function pickColor(color){jQuery("#background-color").val(color);farbtastic.setColor(color);jQuery("#custom-background-image").css("background-color",color)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var _hex=jQuery("#background-color").val();var hex=_hex;if(hex[0]!="#"){hex="#"+hex}hex=hex.replace(/[^#a-fA-F0-9]+/,"");if(hex!=_hex){jQuery("#background-color").val(hex)}if(hex.length==4||hex.length==7){pickColor(hex)}});jQuery('input[name="background-position"]').change(function(){jQuery("#custom-background-image").css("text-align",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(color){pickColor(color)});pickColor(customBackgroundL10n.backgroundcolor)});jQuery(document).mousedown(function(){hide_picker()});function hide_picker(what){var update=false;jQuery("#colorPickerDiv").each(function(){var id=jQuery(this).attr("id");if(id==what){return}var display=jQuery(this).css("display");if(display=="block"){jQuery(this).fadeOut(2)}})}; \ No newline at end of file +var buttons=["#pickcolor"],farbtastic;function pickColor(color){jQuery("#background-color").val(color);farbtastic.setColor(color);jQuery("#custom-background-image").css("background-color",color)}jQuery(document).ready(function(){jQuery("#pickcolor").click(function(){jQuery("#colorPickerDiv").show()});jQuery("#background-color").keyup(function(){var _hex=jQuery("#background-color").val();var hex=_hex;if(hex[0]!="#"){hex="#"+hex}hex=hex.replace(/[^#a-fA-F0-9]+/,"");if(hex!=_hex){jQuery("#background-color").val(hex)}if(hex.length==4||hex.length==7){pickColor(hex)}});jQuery('input[name="background-position"]').change(function(){jQuery("#custom-background-image").css("background-position","top "+jQuery(this).val())});jQuery('select[name="background-repeat"]').change(function(){jQuery("#custom-background-image").css("background-repeat",jQuery(this).val())});farbtastic=jQuery.farbtastic("#colorPickerDiv",function(color){pickColor(color)});pickColor(customBackgroundL10n.backgroundcolor)});jQuery(document).mousedown(function(){hide_picker()});function hide_picker(what){var update=false;jQuery("#colorPickerDiv").each(function(){var id=jQuery(this).attr("id");if(id==what){return}var display=jQuery(this).css("display");if(display=="block"){jQuery(this).fadeOut(2)}})}; \ No newline at end of file diff --git a/wp-includes/theme.php b/wp-includes/theme.php index 2d6e55f7b..6f7fca258 100644 --- a/wp-includes/theme.php +++ b/wp-includes/theme.php @@ -1451,20 +1451,32 @@ function _custom_background_cb() { if ( !$background && !$color ) return; - $repeat = get_theme_mod('background_repeat', 'repeat'); - if ( 'no-repeat' == $repeat ) - $repeat = 'background-repeat: no-repeat;'; - else - $repeat = 'background-repeat: repeat;'; - $position = get_theme_mod('background_position', 'left'); - if ( 'center' == $position ) - $position = 'background-position: top center;'; - elseif ( 'right' == $position ) - $position = 'background-position: top right;'; - else - $position = 'background-position: top left;'; - $attachment = get_theme_mod('background_attachment', 'fixed'); - if ( 'scroll' == $attachment ) + switch ( get_theme_mod('background_repeat', 'repeat') ) { + case 'no-repeat': + $repeat = 'background-repeat: no-repeat;'; + break; + case 'repeat-x': + $repeat = 'background-repeat: repeat-x;'; + break; + case 'repeat-y': + $repeat = 'background-repeat: repeat-y;'; + break; + default: + $repeat = 'background-repeat: repeat;'; + } + + switch ( get_theme_mod('background_position', 'left') ) { + case 'center': + $position = 'background-position: top center;'; + break; + case 'right': + $position = 'background-position: top right;'; + break; + default: + $position = 'background-position: top left;'; + } + + if ( 'scroll' == get_theme_mod('background_attachment', 'fixed') ) $attachment = 'background-attachment: scroll;'; else $attachment = 'background-attachment: fixed;'; @@ -1474,11 +1486,6 @@ function _custom_background_cb() { else $image = ''; - if ( !empty($background ) ) - $image = "background-image: url('$background');"; - else - $image = ''; - if ( !empty($color) ) $color = "background-color: #$color;"; else