WordPress.org

Make WordPress Core

Ticket #14979: 14979.diff

File 14979.diff, 10.9 KB (added by cdog, 15 months ago)
  • wp-includes/class-wp-customize-manager.php

     
    824824 
    825825                $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 
    826826 
     827                $this->add_setting( 'background_size', array( 
     828                        'default'        => 'auto auto', 
     829                        'theme_supports' => 'custom-background' 
     830                ) ); 
     831 
     832                $this->add_control( 'background_size', array( 
     833                        'label'      => __( 'Background Size' ), 
     834                        'section'    => 'background_image', 
     835                        'type'       => 'radio', 
     836                        'choices'    => array( 
     837                                'auto auto' => __( 'Original' ), 
     838                                'cover'     => __( 'Fill' ), 
     839                                'contain'   => __( 'Fit' ), 
     840                                '100% 100%' => __( 'Stretch' ) 
     841                        ) 
     842                ) ); 
     843 
    827844                $this->add_setting( 'background_repeat', array( 
    828845                        'default'        => 'repeat', 
    829846                        'theme_supports' => 'custom-background', 
     
    875892                // If the theme is using the default background callback, we can update 
    876893                // the background CSS using postMessage. 
    877894                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 
    878                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) { 
     895                        foreach ( array( 'color', 'image', 'size', 'repeat', 'position_x', 'attachment' ) as $prop ) { 
    879896                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 
    880897                        } 
    881898                } 
  • wp-includes/js/customize-preview.js

     
    9898                preview.send( 'ready' ); 
    9999 
    100100                /* Custom Backgrounds */ 
    101                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) { 
     101                bg = $.map(['color', 'image', 'size', 'position_x', 'repeat', 'attachment'], function( prop ) { 
    102102                        return 'background_' + prop; 
    103103                }); 
    104104 
    105                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) { 
     105                api.when.apply( api, bg ).done( function( color, image, size, position_x, repeat, attachment ) { 
    106106                        var body = $(document.body), 
    107107                                head = $('head'), 
    108108                                style = $('#custom-background-css'), 
     
    127127 
    128128                                if ( image() ) { 
    129129                                        css += 'background-image: url("' + image() + '");'; 
     130                                        css += 'background-size: ' + size() + ';'; 
    130131                                        css += 'background-position: top ' + position_x() + ';'; 
    131132                                        css += 'background-repeat: ' + repeat() + ';'; 
    132133                                        css += 'background-attachment: ' + attachment() + ';'; 
  • wp-includes/theme.php

     
    11601160        if ( $background ) { 
    11611161                $image = " background-image: url('$background');"; 
    11621162 
     1163                $size = get_theme_mod( 'background_size', 'auto auto' ); 
     1164                if ( ! in_array( $size, array( 'auto auto', 'cover', 'contain', '100% 100%' ) ) ) 
     1165                        $size = 'auto auto'; 
     1166                $size = " background-size: $size;"; 
     1167 
    11631168                $repeat = get_theme_mod( 'background_repeat', 'repeat' ); 
    11641169                if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) 
    11651170                        $repeat = 'repeat'; 
     
    11751180                        $attachment = 'scroll'; 
    11761181                $attachment = " background-attachment: $attachment;"; 
    11771182 
    1178                 $style .= $image . $repeat . $position . $attachment; 
     1183                $style .= $image . $size . $repeat . $position . $attachment; 
    11791184        } 
    11801185?> 
    11811186<style type="text/css" id="custom-background-css"> 
     
    17211726                }()); 
    17221727        </script> 
    17231728        <?php 
    1724 } 
    1725  No newline at end of file 
     1729} 
  • wp-admin/js/custom-background.js

     
    1212                        } 
    1313                }); 
    1414 
    15                 $('input[name="background-position-x"]').change(function() { 
    16                         bgImage.css('background-position', $(this).val() + ' top'); 
    17                 }); 
     15                $('input[name="background-size"]').change( function() { 
     16                        bgImage.css( 'background-size', $( this ).val() ); 
     17                } ); 
    1818 
    1919                $('input[name="background-repeat"]').change(function() { 
    2020                        bgImage.css('background-repeat', $(this).val()); 
    2121                }); 
    2222 
     23                $('input[name="background-position-x"]').change(function() { 
     24                        bgImage.css('background-position', $(this).val() + ' top'); 
     25                }); 
     26 
    2327                $('#choose-from-library-link').click( function( event ) { 
    2428                        var $el = $(this); 
    2529 
     
    7175                        frame.open(); 
    7276                }); 
    7377        }); 
    74 })(jQuery); 
    75  No newline at end of file 
     78})(jQuery); 
  • wp-admin/js/customize-controls.js

     
    929929                // Control visibility for default controls 
    930930                $.each({ 
    931931                        'background_image': { 
    932                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ], 
     932                                controls: [ 'background_size', 'background_repeat', 'background_position_x', 'background_attachment' ], 
    933933                                callback: function( to ) { return !! to } 
    934934                        }, 
    935935                        'show_on_front': { 
  • wp-admin/css/wp-admin.css

     
    48714871        border: 1px solid #dfdfdf; 
    48724872} 
    48734873 
    4874 div#custom-background-image img { 
    4875         max-width: 400px; 
    4876         max-height: 300px; 
     4874div#custom-background-image.active { 
     4875        height: 300px; 
    48774876} 
    48784877 
    48794878 
  • wp-admin/custom-background.php

     
    132132                        return; 
    133133                } 
    134134 
     135                if ( isset( $_POST['background-size'] ) ) { 
     136                        check_admin_referer( 'custom-background' ); 
     137 
     138                        if ( in_array( $_POST['background-size'], array( 'auto auto', 'cover', 'contain', '100% 100%' ) ) ) 
     139                                $size = $_POST['background-size']; 
     140                        else 
     141                                $size = 'auto auto'; 
     142 
     143                        set_theme_mod( 'background_size', $size ); 
     144                } 
     145 
    135146                if ( isset($_POST['background-repeat']) ) { 
    136147                        check_admin_referer('custom-background'); 
    137148                        if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) ) 
     
    203214        $background_styles .= 'background-color: #' . $bgcolor . ';'; 
    204215 
    205216if ( get_background_image() ) { 
     217 
    206218        // background-image URL must be single quote, see below 
    207         $background_styles .= ' background-image: url(\'' . set_url_scheme( get_theme_mod( 'background_image_thumb', get_background_image() ) ) . '\');' 
     219        $background_styles .= ' background-image: url(\'' . set_url_scheme( get_theme_mod( 'background_image', get_background_image() ) ) . '\');' 
     220                . ' background-size: ' . get_theme_mod( 'background_size', 'auto auto' ) . ';' 
    208221                . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';' 
    209222                . ' background-position: top ' . get_theme_mod('background_position_x', 'left'); 
    210223} 
    211224?> 
    212 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?> 
    213 <?php if ( get_background_image() ) { ?> 
    214 <img class="custom-background-image" src="<?php echo set_url_scheme( get_theme_mod( 'background_image_thumb', get_background_image() ) ); ?>" style="visibility:hidden;" alt="" /><br /> 
    215 <img class="custom-background-image" src="<?php echo set_url_scheme( get_theme_mod( 'background_image_thumb', get_background_image() ) ); ?>" style="visibility:hidden;" alt="" /> 
    216 <?php } ?> 
     225<div id="custom-background-image" <?php echo get_background_image() ? 'class="active"' : ''; ?> style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?> 
    217226</div> 
    218227<?php } ?> 
    219228</td> 
     
    273282<tbody> 
    274283<?php if ( get_background_image() ) : ?> 
    275284<tr valign="top"> 
     285<th scope="row"><?php _e( 'Size' ); ?></th> 
     286<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Size' ); ?></span></legend> 
     287        <label><input type="radio" name="background-size" value="auto auto"<?php checked( 'auto auto', get_theme_mod( 'background_size', 'auto auto' ) ); ?> /> <?php _e( 'Original' ); ?></label> 
     288        <label><input type="radio" name="background-size" value="cover"<?php checked( 'cover', get_theme_mod( 'background_size', 'auto auto' ) ); ?> /> <?php _e( 'Fill' ); ?></label> 
     289        <label><input type="radio" name="background-size" value="contain"<?php checked( 'contain', get_theme_mod( 'background_size', 'auto auto' ) ); ?> /> <?php _e( 'Fit' ); ?></label> 
     290        <label><input type="radio" name="background-size" value="100% 100%"<?php checked( '100% 100%', get_theme_mod( 'background_size', 'auto auto' ) ); ?> /> <?php _e( 'Stretch' ); ?></label> 
     291</fieldset></td> 
     292</tr> 
     293 
     294<tr valign="top"> 
     295<th scope="row"><?php _e( 'Repeat' ); ?></th> 
     296<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend> 
     297<label><input type="radio" name="background-repeat" value="no-repeat"<?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('No Repeat'); ?></label> 
     298        <label><input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile'); ?></label> 
     299        <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile Horizontally'); ?></label> 
     300        <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile Vertically'); ?></label> 
     301</fieldset></td> 
     302</tr> 
     303 
     304<tr valign="top"> 
    276305<th scope="row"><?php _e( 'Position' ); ?></th> 
    277306<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> 
    278307<label> 
     
    291320</tr> 
    292321 
    293322<tr valign="top"> 
    294 <th scope="row"><?php _e( 'Repeat' ); ?></th> 
    295 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend> 
    296 <label><input type="radio" name="background-repeat" value="no-repeat"<?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('No Repeat'); ?></label> 
    297         <label><input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile'); ?></label> 
    298         <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile Horizontally'); ?></label> 
    299         <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile Vertically'); ?></label> 
    300 </fieldset></td> 
    301 </tr> 
    302  
    303 <tr valign="top"> 
    304323<th scope="row"><?php _e( 'Attachment' ); ?></th> 
    305324<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend> 
    306325<label>