<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><style type="text/css"><!--
#msg dl { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fc0 solid; padding: 6px; }
#msg ul, pre { overflow: auto; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<title>[13856] trunk: Add Repeat-x/repeat-y support to Custom Backgrounds,
Add Live preview of Repeat option,
Use Thumbnail of background for Background Preview.</title>
</head>
<body>
<div id="msg">
<dl>
<dt>Revision</dt> <dd><a href="http://trac.wordpress.org/changeset/13856">13856</a></dd>
<dt>Author</dt> <dd>dd32</dd>
<dt>Date</dt> <dd>2010-03-28 02:53:04 +0000 (Sun, 28 Mar 2010)</dd>
</dl>
<h3>Log Message</h3>
<pre>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 <a href="http://trac.wordpress.org/ticket/12186">#12186</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkwpadmincsswpadmindevcss">trunk/wp-admin/css/wp-admin.dev.css</a></li>
<li><a href="#trunkwpadmincustombackgroundphp">trunk/wp-admin/custom-background.php</a></li>
<li><a href="#trunkwpadminjscustombackgrounddevjs">trunk/wp-admin/js/custom-background.dev.js</a></li>
<li><a href="#trunkwpadminjscustombackgroundjs">trunk/wp-admin/js/custom-background.js</a></li>
<li><a href="#trunkwpincludesthemephp">trunk/wp-includes/theme.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkwpadmincsswpadmindevcss"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/css/wp-admin.dev.css (13855 => 13856)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/css/wp-admin.dev.css 2010-03-28 02:37:10 UTC (rev 13855)
+++ trunk/wp-admin/css/wp-admin.dev.css 2010-03-28 02:53:04 UTC (rev 13856)
</span><span class="lines">@@ -3650,7 +3650,7 @@
</span><span class="cx">
</span><span class="cx"> div#custom-background-image img {
</span><span class="cx"> max-width: 400px;
</span><del>- max-height: 200px;
</del><ins>+ max-height: 300px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> /* Custom Header */
</span></span></pre></div>
<a id="trunkwpadmincustombackgroundphp"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/custom-background.php (13855 => 13856)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/custom-background.php 2010-03-28 02:37:10 UTC (rev 13855)
+++ trunk/wp-admin/custom-background.php 2010-03-28 02:53:04 UTC (rev 13856)
</span><span class="lines">@@ -98,7 +98,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( isset($_POST['background-repeat']) ) {
</span><del>- if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat')) )
</del><ins>+ if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
</ins><span class="cx"> $repeat = $_POST['background-repeat'];
</span><span class="cx"> else
</span><span class="cx"> $repeat = 'repeat';
</span><span class="lines">@@ -149,15 +149,23 @@
</span><span class="cx"> if ( $this->admin_image_div_callback ) {
</span><span class="cx"> call_user_func($this->admin_image_div_callback);
</span><span class="cx"> } else {
</span><del>- if ( $bgcolor = get_background_color() )
- $bgcolor = 'background-color: #' . $bgcolor . ';';
</del><ins>+?>
</ins><span class="cx">
</span><del>- if ( $align = get_theme_mod('background_position', 'left') )
- $align = "text-align: $align;";
-?>
-<div id="custom-background-image" style="<?php echo $bgcolor, $align ?>">
</del><ins>+<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">
</ins><span class="cx"> <?php if ( get_background_image() ) { ?>
</span><del>-<img class="custom-background-image" src="<?php background_image(); ?>" />
</del><ins>+<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;" />
</ins><span class="cx"> <?php } ?>
</span><span class="cx"> <br class="clear" />
</span><span class="cx"> </div>
</span><span class="lines">@@ -192,13 +200,13 @@
</span><span class="cx">
</span><span class="cx"> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
</span><span class="cx"> <label>
</span><del>-<input name="background-repeat" type="radio" value="no-repeat" <?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
-<?php _e('No repeat') ?>
</del><ins>+<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>
</ins><span class="cx"> </label>
</span><del>-<label>
-<input name="background-repeat" type="radio" value="repeat" <?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
-<?php _e('Tile') ?>
-</label>
</del><span class="cx"> </fieldset></td>
</span><span class="cx">
</span><span class="cx"> <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Attachment' ); ?></span></legend>
</span><span class="lines">@@ -286,6 +294,10 @@
</span><span class="cx"> wp_update_attachment_metadata( $id, wp_generate_attachment_metadata( $id, $file ) );
</span><span class="cx">
</span><span class="cx"> set_theme_mod('background_image', esc_url($url));
</span><ins>+
+ $thumbnail = wp_get_attachment_image_src( $id, 'thumbnail' );
+ set_theme_mod('background_image_thumb', esc_url( $thumbnail[0] ) );
+
</ins><span class="cx"> do_action('wp_create_file_in_uploads', $file, $id); // For replication
</span><span class="cx"> $this->updated = true;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkwpadminjscustombackgrounddevjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/custom-background.dev.js (13855 => 13856)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/custom-background.dev.js 2010-03-28 02:37:10 UTC (rev 13855)
+++ trunk/wp-admin/js/custom-background.dev.js 2010-03-28 02:53:04 UTC (rev 13856)
</span><span class="lines">@@ -22,9 +22,12 @@
</span><span class="cx"> pickColor( hex );
</span><span class="cx"> });
</span><span class="cx"> jQuery('input[name="background-position"]').change(function() {
</span><del>- jQuery('#custom-background-image').css('text-align', jQuery(this).val());
</del><ins>+ jQuery('#custom-background-image').css('background-position', 'top '+jQuery(this).val());
</ins><span class="cx"> });
</span><del>-
</del><ins>+ jQuery('select[name="background-repeat"]').change(function() {
+ jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
+ });
+
</ins><span class="cx"> farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
</span><span class="cx"> pickColor(color);
</span><span class="cx"> });
</span></span></pre></div>
<a id="trunkwpadminjscustombackgroundjs"></a>
<div class="modfile"><h4>Modified: trunk/wp-admin/js/custom-background.js (13855 => 13856)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-admin/js/custom-background.js 2010-03-28 02:37:10 UTC (rev 13855)
+++ trunk/wp-admin/js/custom-background.js 2010-03-28 02:53:04 UTC (rev 13856)
</span><span class="lines">@@ -1 +1 @@
</span><del>-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)}})};
</del><span class="cx">\ No newline at end of file
</span><ins>+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)}})};
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkwpincludesthemephp"></a>
<div class="modfile"><h4>Modified: trunk/wp-includes/theme.php (13855 => 13856)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/wp-includes/theme.php 2010-03-28 02:37:10 UTC (rev 13855)
+++ trunk/wp-includes/theme.php 2010-03-28 02:53:04 UTC (rev 13856)
</span><span class="lines">@@ -1451,20 +1451,32 @@
</span><span class="cx"> if ( !$background && !$color )
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- $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 )
</del><ins>+ 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') )
</ins><span class="cx"> $attachment = 'background-attachment: scroll;';
</span><span class="cx"> else
</span><span class="cx"> $attachment = 'background-attachment: fixed;';
</span><span class="lines">@@ -1474,11 +1486,6 @@
</span><span class="cx"> else
</span><span class="cx"> $image = '';
</span><span class="cx">
</span><del>- if ( !empty($background ) )
- $image = "background-image: url('$background');";
- else
- $image = '';
-
</del><span class="cx"> if ( !empty($color) )
</span><span class="cx"> $color = "background-color: #$color;";
</span><span class="cx"> else
</span></span></pre>
</div>
</div>
</body>
</html>