Changeset 13856

Timestamp:

03/28/2010 02:53:04 AM (16 years ago)

Author:

dd32

Message:

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

Location:

trunk

Files:

• wp-admin/css/wp-admin.dev.css (modified) (1 diff)
• wp-admin/custom-background.php (modified) (4 diffs)
• wp-admin/js/custom-background.dev.js (modified) (1 diff)
• wp-admin/js/custom-background.js (modified) (1 diff)
• wp-includes/theme.php (modified) (1 diff)

trunk/wp-admin/css/wp-admin.dev.css

@@ -3651 +3651 @@
 div#custom-background-image img {
         max-width: 400px;
-        max-height: 200px;
+        max-height: 300px;
 }
 

trunk/wp-admin/custom-background.php

@@ -99 +99 @@
 
                 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
@@ -150 +150 @@
                 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;";
 ?>
-<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() ) { ?>
-<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 } ?>
 <br class="clear" />
@@ -193 +201 @@
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
 <label>
-<input name="background-repeat" type="radio" value="no-repeat" <?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
-<?php _e('No repeat') ?>
-</label>
-<label>
-<input name="background-repeat" type="radio" value="repeat" <?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
-<?php _e('Tile') ?>
+<select name="background-repeat">
+        <option value="no-repeat" <?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
+        <option value="repeat" <?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
+        <option value="repeat-x" <?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
+        <option value="repeat-y" <?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
+</select>
 </label>
 </fieldset></td>
@@ -287 +295 @@
 
                 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;

trunk/wp-admin/js/custom-background.dev.js

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

trunk/wp-admin/js/custom-background.js

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

trunk/wp-includes/theme.php

@@ -1452 +1452 @@
                 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;';
-
-        if ( !empty($background ) )
-                $image = "background-image: url('$background');";
-        else
-                $image = '';
 
         if ( !empty($background ) )