WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
This commit is contained in:
dd32 2010-03-28 02:53:04 +00:00
parent 4422f6d1fd
commit f0088e38eb
5 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/css/wp-admin.dev.css
View File

@ -3650,7 +3650,7 @@ div#custom-background-image {
div#custom-background-image img { div#custom-background-image img {
max-width: 400px; max-width: 400px;
max-height: 200px; max-height: 300px;
} }
/* Custom Header */ /* Custom Header */

40
wp-admin/custom-background.php
View File

@ -98,7 +98,7 @@ class Custom_Background {
} }
if ( isset($_POST['background-repeat']) ) { 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']; $repeat = $_POST['background-repeat'];
else else
$repeat = 'repeat'; $repeat = 'repeat';
@ -149,15 +149,23 @@ class Custom_Background {
if ( $this->admin_image_div_callback ) { if ( $this->admin_image_div_callback ) {
call_user_func($this->admin_image_div_callback); call_user_func($this->admin_image_div_callback);
} else { } else {
if ( $bgcolor = get_background_color() )
$bgcolor = 'background-color: #' . $bgcolor . ';';
if ( $align = get_theme_mod('background_position', 'left') )
$align = "text-align: $align;";
?> ?>
<div id="custom-background-image" style="<?php echo $bgcolor, $align ?>">
<style type="text/css">
#custom-background-image {
background-color: #<?php echo get_background_color()?>;
<?php if ( get_background_image() ) { ?>
background: url(<?php echo get_theme_mod('background_image_thumb', ''); ?>);
background-repeat: <?php echo get_theme_mod('background_repeat', 'no-repeat'); ?>;
background-position: top <?php echo get_theme_mod('background_position', 'left'); ?>;
background-attachment: <?php echo get_theme_mod('background_position', 'fixed'); ?>;
<?php } ?>
}
</style>
<div id="custom-background-image">
<?php if ( get_background_image() ) { ?> <?php if ( get_background_image() ) { ?>
<img class="custom-background-image" src="<?php background_image(); ?>" /> <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" /><br />
<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" />
<?php } ?> <?php } ?>
<br class="clear" /> <br class="clear" />
</div> </div>
@ -192,12 +200,12 @@ class Custom_Background {
<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
<label> <label>
<input name="background-repeat" type="radio" value="no-repeat" <?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <select name="background-repeat">
<?php _e('No repeat') ?> <option value="no-repeat" <?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
</label> <option value="repeat" <?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
<label> <option value="repeat-x" <?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
<input name="background-repeat" type="radio" value="repeat" <?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <option value="repeat-y" <?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
<?php _e('Tile') ?> </select>
</label> </label>
</fieldset></td> </fieldset></td>
@ -286,6 +294,10 @@ class Custom_Background {
wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) ); wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
set_theme_mod('background_image', esc_url($url)); 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 do_action('wp_create_file_in_uploads', $file, $id); // For replication
$this->updated = true; $this->updated = true;
} }

7
wp-admin/js/custom-background.dev.js
View File

@ -22,9 +22,12 @@ jQuery(document).ready(function() {
pickColor( hex ); pickColor( hex );
}); });
jQuery('input[name="background-position"]').change(function() { 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) { farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
pickColor(color); pickColor(color);
}); });

2
wp-admin/js/custom-background.js
View File

@ -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)}})}; 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)}})};

45
wp-includes/theme.php
View File

@ -1451,20 +1451,32 @@ function _custom_background_cb() {
if ( !$background && !$color ) if ( !$background && !$color )
return; return;
$repeat = get_theme_mod('background_repeat', 'repeat'); switch ( get_theme_mod('background_repeat', 'repeat') ) {
if ( 'no-repeat' == $repeat ) case 'no-repeat':
$repeat = 'background-repeat: no-repeat;'; $repeat = 'background-repeat: no-repeat;';
else break;
$repeat = 'background-repeat: repeat;'; case 'repeat-x':
$position = get_theme_mod('background_position', 'left'); $repeat = 'background-repeat: repeat-x;';
if ( 'center' == $position ) break;
$position = 'background-position: top center;'; case 'repeat-y':
elseif ( 'right' == $position ) $repeat = 'background-repeat: repeat-y;';
$position = 'background-position: top right;'; break;
else default:
$position = 'background-position: top left;'; $repeat = 'background-repeat: repeat;';
$attachment = get_theme_mod('background_attachment', 'fixed'); }
if ( 'scroll' == $attachment )
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;'; $attachment = 'background-attachment: scroll;';
else else
$attachment = 'background-attachment: fixed;'; $attachment = 'background-attachment: fixed;';
@ -1474,11 +1486,6 @@ function _custom_background_cb() {
else else
$image = ''; $image = '';
if ( !empty($background ) )
$image = "background-image: url('$background');";
else
$image = '';
if ( !empty($color) ) if ( !empty($color) )
$color = "background-color: #$color;"; $color = "background-color: #$color;";
else else