WordPress.org

Make WordPress Core

Ticket #14979: 14979.1.diff

File 14979.1.diff, 11.0 KB (added by cdog, 8 years 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>