WordPress.org

Make WordPress Core

Ticket #14979: 14979.1.diff

File 14979.1.diff, 11.0 KB (added by cdog, 8 months ago)
  • wp-includes/class-wp-customize-manager.php

     
    826826 
    827827                $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 
    828828 
     829                $this->add_setting( 'background_size', array( 
     830                        'default'        => 'auto auto', 
     831                        'theme_supports' => 'custom-background' 
     832                ) ); 
     833 
     834                $this->add_control( 'background_size', array( 
     835                        'label'      => __( 'Background Size' ), 
     836                        'section'    => 'background_image', 
     837                        'type'       => 'radio', 
     838                        'choices'    => array( 
     839                                'auto auto' => __( 'Original' ), 
     840                                'cover'     => __( 'Fill' ), 
     841                                'contain'   => __( 'Fit' ), 
     842                                '100% 100%' => __( 'Stretch' ) 
     843                        ) 
     844                ) ); 
     845 
    829846                $this->add_setting( 'background_repeat', array( 
    830847                        'default'        => 'repeat', 
    831848                        'theme_supports' => 'custom-background', 
     
    877894                // If the theme is using the default background callback, we can update 
    878895                // the background CSS using postMessage. 
    879896                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 
    880                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) { 
     897                        foreach ( array( 'color', 'image', 'size', 'repeat', 'position_x', 'attachment' ) as $prop ) { 
    881898                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 
    882899                        } 
    883900                } 
  • 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

     
    11661166        if ( $background ) { 
    11671167                $image = " background-image: url('$background');"; 
    11681168 
     1169                $size = get_theme_mod( 'background_size', 'auto auto' ); 
     1170                if ( ! in_array( $size, array( 'auto auto', 'cover', 'contain', '100% 100%' ) ) ) 
     1171                        $size = 'auto auto'; 
     1172                $size = " background-size: $size;"; 
     1173 
    11691174                $repeat = get_theme_mod( 'background_repeat', 'repeat' ); 
    11701175                if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) 
    11711176                        $repeat = 'repeat'; 
     
    11811186                        $attachment = 'scroll'; 
    11821187                $attachment = " background-attachment: $attachment;"; 
    11831188 
    1184                 $style .= $image . $repeat . $position . $attachment; 
     1189                $style .= $image . $size . $repeat . $position . $attachment; 
    11851190        } 
    11861191?> 
    11871192<style type="text/css" id="custom-background-css"> 
     
    17271732                }()); 
    17281733        </script> 
    17291734        <?php 
    1730 } 
    1731  No newline at end of file 
     1735} 
  • 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

     
    914914                // Control visibility for default controls 
    915915                $.each({ 
    916916                        'background_image': { 
    917                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ], 
     917                                controls: [ 'background_size', 'background_repeat', 'background_position_x', 'background_attachment' ], 
    918918                                callback: function( to ) { return !! to } 
    919919                        }, 
    920920                        'show_on_front': { 
  • wp-admin/css/wp-admin.css

     
    54575457        border: 1px solid #dfdfdf; 
    54585458} 
    54595459 
    5460 div#custom-background-image img { 
    5461         max-width: 400px; 
    5462         max-height: 300px; 
     5460div#custom-background-image.active { 
     5461        height: 300px; 
    54635462} 
    54645463 
    54655464 
  • 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() ) { 
    206         $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', get_background_image() ) ) ) ); 
     217        $background_image = esc_url( set_url_scheme( get_theme_mod( 'background_image', str_replace( '%', '%%', get_background_image() ) ) ) ); 
    207218        // background-image URL must be single quote, see below 
    208         $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');' 
     219        $background_styles .= ' background-image: url(\'' . $background_image . '\');' 
     220                . ' background-size: ' . get_theme_mod( 'background_size', 'auto auto' ) . ';' 
    209221                . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';' 
    210222                . ' background-position: top ' . get_theme_mod('background_position_x', 'left'); 
    211223} 
    212224?> 
    213 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?> 
    214 <?php if ( get_background_image() ) { ?> 
    215 <img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" /><br /> 
    216 <img class="custom-background-image" src="<?php echo $background_image_thumb; ?>" style="visibility:hidden;" alt="" /> 
    217 <?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 ?> 
    218226</div> 
    219227<?php } ?> 
    220228</td> 
     
    274282<tbody> 
    275283<?php if ( get_background_image() ) : ?> 
    276284<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"> 
    277305<th scope="row"><?php _e( 'Position' ); ?></th> 
    278306<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> 
    279307<label> 
     
    292320</tr> 
    293321 
    294322<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"> 
    305323<th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th> 
    306324<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend> 
    307325<label>