WordPress.org

Make WordPress Core

Changeset 13856


Ignore:
Timestamp:
03/28/2010 02:53:04 AM (11 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.dev.css

    r13832 r13856  
    36513651div#custom-background-image img {
    36523652    max-width: 400px;
    3653     max-height: 200px;
     3653    max-height: 300px;
    36543654}
    36553655
  • trunk/wp-admin/custom-background.php

    r13830 r13856  
    9999
    100100        if ( isset($_POST['background-repeat']) ) {
    101             if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat')) )
     101            if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
    102102                $repeat = $_POST['background-repeat'];
    103103            else
     
    150150        call_user_func($this->admin_image_div_callback);
    151151    } else {
    152         if ( $bgcolor = get_background_color() )
    153             $bgcolor = 'background-color: #' . $bgcolor . ';';
    154 
    155         if ( $align = get_theme_mod('background_position', 'left') )
    156             $align = "text-align: $align;";
    157152?>
    158 <div id="custom-background-image"  style="<?php echo $bgcolor, $align ?>">
     153
     154<style type="text/css">
     155#custom-background-image {
     156    background-color: #<?php echo get_background_color()?>;
     157    <?php if ( get_background_image() ) { ?>
     158    background: url(<?php echo get_theme_mod('background_image_thumb', ''); ?>);
     159    background-repeat: <?php echo get_theme_mod('background_repeat', 'no-repeat'); ?>;
     160    background-position: top <?php echo get_theme_mod('background_position', 'left'); ?>;
     161    background-attachment: <?php echo get_theme_mod('background_position', 'fixed'); ?>;
     162    <?php } ?>
     163}
     164</style>
     165<div id="custom-background-image">
    159166<?php if ( get_background_image() ) { ?>
    160 <img class="custom-background-image" src="<?php background_image(); ?>" />
     167<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" /><br />
     168<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" />
    161169<?php } ?>
    162170<br class="clear" />
     
    193201<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
    194202<label>
    195 <input name="background-repeat" type="radio" value="no-repeat" <?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
    196 <?php _e('No repeat') ?>
    197 </label>
    198 <label>
    199 <input name="background-repeat" type="radio" value="repeat" <?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
    200 <?php _e('Tile') ?>
     203<select name="background-repeat">
     204    <option value="no-repeat" <?php selected('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> ><?php _e('No repeat'); ?></option>
     205    <option value="repeat" <?php selected('repeat', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile'); ?></option>
     206    <option value="repeat-x" <?php selected('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Horizontally'); ?></option>
     207    <option value="repeat-y" <?php selected('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?>><?php _e('Tile Vertically'); ?></option>
     208</select>
    201209</label>
    202210</fieldset></td>
     
    287295
    288296        set_theme_mod('background_image', esc_url($url));
     297
     298        $thumbnail = wp_get_attachment_image_src( $id, 'thumbnail' );
     299        set_theme_mod('background_image_thumb', esc_url( $thumbnail[0] ) );
     300
    289301        do_action('wp_create_file_in_uploads', $file, $id); // For replication
    290302        $this->updated = true;
  • trunk/wp-admin/js/custom-background.dev.js

    r13799 r13856  
    2323    });
    2424    jQuery('input[name="background-position"]').change(function() {
    25         jQuery('#custom-background-image').css('text-align', jQuery(this).val());
     25        jQuery('#custom-background-image').css('background-position', 'top '+jQuery(this).val());
    2626    });
    27 
     27    jQuery('select[name="background-repeat"]').change(function() {
     28        jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
     29    });
     30   
    2831    farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
    2932        pickColor(color);
  • trunk/wp-admin/js/custom-background.js

    r13799 r13856  
    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)}})};
     1var 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

    r13829 r13856  
    14521452        return;
    14531453
    1454     $repeat = get_theme_mod('background_repeat', 'repeat');
    1455     if ( 'no-repeat' == $repeat )
    1456         $repeat = 'background-repeat: no-repeat;';
    1457     else
    1458         $repeat = 'background-repeat: repeat;';
    1459     $position = get_theme_mod('background_position', 'left');
    1460     if  ( 'center' == $position )
    1461         $position = 'background-position: top center;';
    1462     elseif ( 'right' == $position )
    1463         $position = 'background-position: top right;';
    1464     else
    1465         $position = 'background-position: top left;';
    1466     $attachment = get_theme_mod('background_attachment', 'fixed');
    1467     if ( 'scroll' == $attachment )
     1454    switch ( get_theme_mod('background_repeat', 'repeat') ) {
     1455        case 'no-repeat':
     1456            $repeat = 'background-repeat: no-repeat;';
     1457            break;
     1458        case 'repeat-x':
     1459            $repeat = 'background-repeat: repeat-x;';
     1460            break;
     1461        case 'repeat-y':
     1462            $repeat = 'background-repeat: repeat-y;';
     1463            break;
     1464        default:
     1465            $repeat = 'background-repeat: repeat;';
     1466    }
     1467
     1468    switch ( get_theme_mod('background_position', 'left') ) {
     1469        case 'center':
     1470            $position = 'background-position: top center;';
     1471            break;
     1472        case 'right':
     1473            $position = 'background-position: top right;';
     1474            break;
     1475        default:
     1476            $position = 'background-position: top left;';
     1477    }
     1478
     1479    if ( 'scroll' == get_theme_mod('background_attachment', 'fixed') )
    14681480        $attachment = 'background-attachment: scroll;';
    14691481    else
    14701482        $attachment = 'background-attachment: fixed;';
    1471 
    1472     if ( !empty($background ) )
    1473         $image = "background-image: url('$background');";
    1474     else
    1475         $image = '';
    14761483
    14771484    if ( !empty($background ) )
Note: See TracChangeset for help on using the changeset viewer.