WordPress.org

Make WordPress Core

Ticket #14979: 14979.diff

File 14979.diff, 10.9 KB (added by cdog, 9 years 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>