WordPress.org

Make WordPress Core

Ticket #18623: choose-background-images.diff

File choose-background-images.diff, 21.2 KB (added by kobenland, 6 years ago)

Makes uploaded background images reusable - like custom headers sans the randomness. Based on step-1.diff

  • wp-admin/css/wp-admin.dev.css

    
            
     
    43124312        max-height: 300px;
    43134313}
    43144314
     4315.appearance_page_custom-background .available-backgrounds .default-background {
     4316        float: left;
     4317        margin: 0 20px 20px 0;
     4318}
     4319
     4320.appearance_page_custom-background .random-background {
     4321        clear: both;
     4322        margin: 0 20px 20px 0;
     4323        vertical-align: middle;
     4324}
     4325
     4326.appearance_page_custom-background .available-backgrounds label input,
     4327.appearance_page_custom-background .random-background label input {
     4328        margin-right: 10px;
     4329}
     4330
     4331.appearance_page_custom-background .available-backgrounds label img {
     4332        vertical-align: middle;
     4333}
     4334
    43154335
    43164336/*------------------------------------------------------------------------------
    43174337  16.3 - Tabbed Admin Screen Interface (Experimental)
  • wp-admin/custom-background.php

     
    6969                add_action("load-$page", array(&$this, 'admin_load'));
    7070                add_action("load-$page", array(&$this, 'take_action'), 49);
    7171                add_action("load-$page", array(&$this, 'handle_upload'), 49);
     72                add_action("load-$page", array(&$this, 'settings'), 50);
     73                add_action('admin_notices', array(&$this, 'admin_notices'));
    7274
    7375                if ( $this->admin_header_callback )
    7476                        add_action("admin_head-$page", $this->admin_header_callback, 51);
     
    99101                wp_enqueue_script('custom-background');
    100102                wp_enqueue_style('farbtastic');
    101103        }
     104       
     105        function settings() {
     106                if ( $this->admin_image_div_callback ) {
     107                        call_user_func($this->admin_image_div_callback);
     108                } else {
     109                        add_settings_section( 'background-image', false, '__return_false', 'custom-background-image' );
     110                        add_settings_field( 'preview', __('Preview'), array(&$this, 'preview_field'), 'custom-background-image', 'background-image' );
     111                        add_settings_field( 'custom-background-upload', __('Upload Image'), array(&$this, 'background_upload_field'), 'custom-background-image', 'background-image' );
     112                }
     113               
     114                add_settings_section( 'display-options', __('Display Options'), '__return_false', $this->page );
     115                add_settings_field( 'background-selection', __('Uploaded Images'), array(&$this, 'background_selection_field'), $this->page, 'display-options' );
     116                if ( get_background_image() )
     117                                add_settings_field( 'remove-background', __('Remove Image'), array(&$this, 'remove_background_field'), $this->page, 'display-options' );
     118                       
     119                if ( defined( 'BACKGROUND_IMAGE' ) )
     120                        add_settings_field( 'reset-background', __('Restore Original Image'), array(&$this, 'reset_background_field'), $this->page, 'display-options' );
     121               
     122                if ( get_background_image() ) {
     123                        add_settings_field( 'background-position', __('Position'), array(&$this, 'background_position_field'), $this->page, 'display-options' );
     124                        add_settings_field( 'background-repeat', __('Repeat'), array(&$this, 'background_repeat_field'), $this->page, 'display-options' );
     125                        add_settings_field( 'background-attachment', __('Attachment'), array(&$this, 'background_attachment_field'), $this->page, 'display-options' );
     126                }
     127                add_settings_field( 'background-color', __('Background Color'), array(&$this, 'background_color_field'), $this->page, 'display-options' );
     128        }
     129       
     130        function preview_field() {
     131                $background_styles = '';
     132                if ( $bgcolor = get_background_color() )
     133                        $background_styles .= 'background-color: #' . $bgcolor . ';';
     134               
     135                if ( get_background_image() ) {
     136                        // background-image URL must be single quote, see below
     137                        $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
     138                                . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
     139                                . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
     140                }
     141                ?>
     142                <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
     143                <?php if ( get_background_image() ) { ?>
     144                <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
     145                <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
     146                <?php } ?>
     147                </div>
     148                <?php
     149        }
     150       
     151        function background_upload_field() {
     152                ?>
     153                <form enctype="multipart/form-data" id="upload-form" method="post" action="">
     154                <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br />
     155                <input type="file" id="upload" name="import" />
     156                <input type="hidden" name="action" value="save" />
     157                <?php
     158                wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload');
     159                submit_button( __( 'Upload' ), 'button', 'submit', false );
     160                ?>
     161                </form>
     162                <?php
     163        }
     164       
     165        function background_selection_field() {
     166                $backgrounds = get_uploaded_background_images();
     167
     168                /* TODO
     169                if ( 1 < count( $backgrounds ) ) {
     170                        echo '<div class="random-header">';
     171                        echo '<label><input name="default-header" type="radio" value="random-' . $type . '-image"' . checked( is_random_header_image( $type ), true, false ) . ' />';
     172                        echo __( '<strong>Random:</strong> Show a different image on each page.' );
     173                        echo '</label>';
     174                        echo '</div>';
     175                }*/
     176                echo '<p>';
     177                _e( 'You can choose one of your previously uploaded backgrounds.' );
     178                echo '</p>';
     179               
     180                echo '<div class="available-backgrounds">';
     181                foreach ( $backgrounds as $background_key => $background ) {
     182                        $background_thumbnail = $background['thumbnail_url'];
     183                        $background_url = $background['url'];
     184                        $background_desc = empty( $background['description'] ) ? '' : $background['description'];
     185                        echo '<div class="default-background">';
     186                        echo '<label><input name="default-background" type="radio" value="' . esc_attr( $background_key ) . '" ' . checked( $background_url, get_theme_mod( 'background_image' ), false ) . ' />';
     187                        $width = '';
     188                        if ( !empty( $background['attachment_id'] ) )
     189                                $width = ' width="' . $background['width'] . '"';
     190                        echo '<img src="' . $background_thumbnail . '" alt="' . esc_attr( $background_desc ) .'" title="' . esc_attr( $background_desc ) . '"' . $width . ' /></label>';
     191                        echo '</div>';
     192                }
     193                echo '<div class="clear"></div></div>';
     194        }
     195       
     196        function remove_background_field() {
     197                submit_button( __( 'Remove Background Image' ), 'button', 'remove-background', false ); ?>
     198                <span class="description"><?php _e('This will remove the background image. You will not be able to restore any customizations.'); ?></span><?php
     199        }
     200       
     201        function restore_background_field() {
     202                submit_button( __( 'Restore Original Image' ), 'button', 'reset-background', false ); ?>
     203                <span class="description"><?php _e('This will restore the original background image. You will not be able to restore any customizations.'); ?></span><?php
     204        }
     205       
     206        function background_position_field() {
     207                ?>
     208                <fieldset>
     209                        <legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
     210                        <label>
     211                                <input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
     212                                <?php _e('Left') ?>
     213                        </label>
     214                        <label>
     215                                <input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
     216                                <?php _e('Center') ?>
     217                        </label>
     218                        <label>
     219                                <input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
     220                                <?php _e('Right') ?>
     221                        </label>
     222                </fieldset>
     223                <?php
     224        }
     225       
     226        function background_repeat_field() {
     227                ?>
     228                <fieldset>
     229                        <legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
     230                        <label>
     231                                <input type="radio" name="background-repeat" value="no-repeat"<?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
     232                                <?php _e('No Repeat'); ?>
     233                        </label>
     234                        <label>
     235                                <input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
     236                                <?php _e('Tile'); ?>
     237                        </label>
     238                        <label>
     239                                <input type="radio" name="background-repeat" value="repeat-x"<?php checked('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?> />
     240                                <?php _e('Tile Horizontally'); ?>
     241                        </label>
     242                        <label>
     243                                <input type="radio" name="background-repeat" value="repeat-y"<?php checked('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?> />
     244                                <?php _e('Tile Vertically'); ?>
     245                        </label>
     246                </fieldset>
     247                <?php
     248        }
     249       
     250        function background_attachment_field() {
     251                ?>
     252                <fieldset>
     253                        <legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
     254                        <label>
     255                                <input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'scroll')); ?> />
     256                                <?php _e('Scroll') ?>
     257                        </label>
     258                        <label>
     259                                <input name="background-attachment" type="radio" value="fixed" <?php checked('fixed', get_theme_mod('background_attachment', 'scroll')); ?> />
     260                                <?php _e('Fixed') ?>
     261                        </label>
     262                </fieldset>
     263                <?php
     264        }
     265       
     266        function background_color_field() {
     267                ?>
     268                <fieldset>
     269                        <legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
     270                        <?php $show_clear = get_background_color() ? '' : ' style="display:none"'; ?>
     271                        <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
     272                        <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php _e( 'Clear' ); ?></a>)</span>
     273                        <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
     274                </fieldset>
     275                <?php
     276        }
     277       
     278        function updated() {
     279                if ( ! get_settings_errors('custom-background') )
     280                        add_settings_error( 'custom-background', 'background-updated',sprintf(__( 'Background updated. <a href="%s">Visit your site</a> to see how it looks.' ), home_url( '/' )), 'updated' );
     281        }
     282       
     283        function admin_notices() {
     284                settings_errors( 'custom-background' );
     285        }
    102286
    103287        /**
    104288         * Execute custom background modification.
     
    109293
    110294                if ( empty($_POST) )
    111295                        return;
    112 
     296                check_admin_referer('custom-background');
     297               
    113298                if ( isset($_POST['reset-background']) ) {
    114                         check_admin_referer('custom-background-reset', '_wpnonce-custom-background-reset');
    115299                        remove_theme_mod('background_image');
    116300                        remove_theme_mod('background_image_thumb');
    117                         $this->updated = true;
     301                        $this->updated();
    118302                        return;
    119303                }
    120304
     
    120304
    121305                if ( isset($_POST['remove-background']) ) {
    122306                        // @TODO: Uploaded files are not removed here.
    123                         check_admin_referer('custom-background-remove', '_wpnonce-custom-background-remove');
    124307                        set_theme_mod('background_image', '');
    125308                        set_theme_mod('background_image_thumb', '');
    126                         $this->updated = true;
     309                        $this->updated();
    127310                        return;
    128311                }
    129312
     
    128311                }
    129312
    130313                if ( isset($_POST['background-repeat']) ) {
    131                         check_admin_referer('custom-background');
    132314                        if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
    133315                                $repeat = $_POST['background-repeat'];
    134316                        else
     
    137319                }
    138320
    139321                if ( isset($_POST['background-position-x']) ) {
    140                         check_admin_referer('custom-background');
    141322                        if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
    142323                                $position = $_POST['background-position-x'];
    143324                        else
     
    146327                }
    147328
    148329                if ( isset($_POST['background-attachment']) ) {
    149                         check_admin_referer('custom-background');
    150330                        if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
    151331                                $attachment = $_POST['background-attachment'];
    152332                        else
     
    155335                }
    156336
    157337                if ( isset($_POST['background-color']) ) {
    158                         check_admin_referer('custom-background');
    159338                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
    160339                        if ( strlen($color) == 6 || strlen($color) == 3 )
    161340                                set_theme_mod('background_color', $color);
     
    162341                        else
    163342                                set_theme_mod('background_color', '');
    164343                }
     344               
     345                if ( isset( $_POST['default-background'] ) ) {
     346                        $uploaded = get_uploaded_background_images();
     347                        if ( isset( $uploaded[$_POST['default-background']] ) ) {
     348                                set_theme_mod( 'background_image', esc_url( $uploaded[$_POST['default-background']]['url'] ) );
     349                                set_theme_mod( 'background_image_thumb', esc_url( $uploaded[$_POST['default-background']]['thumbnail_url'] ) );
     350                        }
     351                }
    165352
    166                 $this->updated = true;
     353                $this->updated();
    167354        }
    168355
    169356        /**
     
    174361        function admin_page() {
    175362?>
    176363<div class="wrap" id="custom-background">
    177 <?php screen_icon(); ?>
    178 <h2><?php _e('Custom Background'); ?></h2>
    179 <?php if ( !empty($this->updated) ) { ?>
    180 <div id="message" class="updated">
    181 <p><?php printf( __( 'Background updated. <a href="%s">Visit your site</a> to see how it looks.' ), home_url( '/' ) ); ?></p>
     364        <?php screen_icon(); ?>
     365        <h2><?php _e('Custom Background'); ?></h2>
     366       
     367        <?php do_settings_sections( 'custom-background-image' );?>
     368       
     369        <form method="post" action="">
     370        <?php
     371        do_settings_sections( $this->page );
     372        wp_nonce_field( 'custom-background' );
     373        submit_button( null, 'primary', 'save-background-options' ); ?>
     374        </form>
    182375</div>
    183 <?php }
    184 
    185         if ( $this->admin_image_div_callback ) {
    186                 call_user_func($this->admin_image_div_callback);
    187         } else {
    188 ?>
    189 <h3><?php _e('Background Image'); ?></h3>
    190 <table class="form-table">
    191 <tbody>
    192 <tr valign="top">
    193 <th scope="row"><?php _e('Preview'); ?></th>
    194 <td>
    195 <?php
    196 $background_styles = '';
    197 if ( $bgcolor = get_background_color() )
    198         $background_styles .= 'background-color: #' . $bgcolor . ';';
    199 
    200 if ( get_background_image() ) {
    201         // background-image URL must be single quote, see below
    202         $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
    203                 . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
    204                 . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
    205 }
    206 ?>
    207 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
    208 <?php if ( get_background_image() ) { ?>
    209 <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
    210 <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
    211 <?php } ?>
    212 </div>
    213 <?php } ?>
    214 </td>
    215 </tr>
    216 <?php if ( get_background_image() ) : ?>
    217 <tr valign="top">
    218 <th scope="row"><?php _e('Remove Image'); ?></th>
    219 <td>
    220 <form method="post" action="">
    221 <?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
    222 <?php submit_button( __( 'Remove Background Image' ), 'button', 'remove-background', false ); ?><br/>
    223 <?php _e('This will remove the background image. You will not be able to restore any customizations.') ?>
    224 </form>
    225 </td>
    226 </tr>
    227 <?php endif; ?>
    228 
    229 <?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
    230 <tr valign="top">
    231 <th scope="row"><?php _e('Restore Original Image'); ?></th>
    232 <td>
    233 <form method="post" action="">
    234 <?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
    235 <?php submit_button( __( 'Restore Original Image' ), 'button', 'reset-background', false ); ?><br/>
    236 <?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?>
    237 </form>
    238 </td>
    239 </tr>
    240 
    241 <?php endif; ?>
    242 <tr valign="top">
    243 <th scope="row"><?php _e('Upload Image'); ?></th>
    244 <td><form enctype="multipart/form-data" id="upload-form" method="post" action="">
    245 <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
    246 <input type="hidden" name="action" value="save" />
    247 <?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
    248 <?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
    249 </form>
    250 </td>
    251 </tr>
    252 </tbody>
    253 </table>
    254 
    255 <h3><?php _e('Display Options') ?></h3>
    256 <form method="post" action="">
    257 <table class="form-table">
    258 <tbody>
    259 <?php if ( get_background_image() ) : ?>
    260 <tr valign="top">
    261 <th scope="row"><?php _e( 'Position' ); ?></th>
    262 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
    263 <label>
    264 <input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
    265 <?php _e('Left') ?>
    266 </label>
    267 <label>
    268 <input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
    269 <?php _e('Center') ?>
    270 </label>
    271 <label>
    272 <input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
    273 <?php _e('Right') ?>
    274 </label>
    275 </fieldset></td>
    276 </tr>
    277 
    278 <tr valign="top">
    279 <th scope="row"><?php _e( 'Repeat' ); ?></th>
    280 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
    281 <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>
    282         <label><input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile'); ?></label>
    283         <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>
    284         <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>
    285 </fieldset></td>
    286 </tr>
    287 
    288 <tr valign="top">
    289 <th scope="row"><?php _e( 'Attachment' ); ?></th>
    290 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
    291 <label>
    292 <input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'scroll')); ?> />
    293 <?php _e('Scroll') ?>
    294 </label>
    295 <label>
    296 <input name="background-attachment" type="radio" value="fixed" <?php checked('fixed', get_theme_mod('background_attachment', 'scroll')); ?> />
    297 <?php _e('Fixed') ?>
    298 </label>
    299 </fieldset></td>
    300 </tr>
    301 <?php endif; // get_background_image() ?>
    302 <tr valign="top">
    303 <th scope="row"><?php _e( 'Background Color' ); ?></th>
    304 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
    305 <?php $show_clear = get_background_color() ? '' : ' style="display:none"'; ?>
    306 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
    307 <a class="hide-if-no-js" href="#" id="pickcolor"><?php _e('Select a Color'); ?></a> <span<?php echo $show_clear; ?> class="hide-if-no-js" id="clearcolor"> (<a href="#"><?php _e( 'Clear' ); ?></a>)</span>
    308 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    309 </fieldset></td>
    310 </tr>
    311 </tbody>
    312 </table>
    313 
    314 <?php wp_nonce_field('custom-background'); ?>
    315 <?php submit_button( null, 'primary', 'save-background-options' ); ?>
    316 </form>
    317 
    318 </div>
    319376<?php
    320377        }
    321378
     
    363420                set_theme_mod('background_image_thumb', esc_url( $thumbnail[0] ) );
    364421
    365422                do_action('wp_create_file_in_uploads', $file, $id); // For replication
    366                 $this->updated = true;
     423                $this->updated();
    367424        }
    368425
    369426}
  • wp-includes/theme.php

    
            
     
    12071207}
    12081208
    12091209/**
     1210 * Get the header images uploaded for the current theme.
     1211 *
     1212 * @return array
     1213 */
     1214function get_uploaded_background_images() {
     1215        $background_images = array();
     1216
     1217        // @todo caching
     1218        $backgrounds = get_posts( array(
     1219                'post_type' => 'attachment',
     1220                'meta_key' => '_wp_attachment_is_custom_background',
     1221                'meta_value' => get_option('stylesheet'),
     1222                'orderby' => 'none',
     1223                'nopaging' => true
     1224        ) );
     1225       
     1226        if ( empty( $backgrounds ) )
     1227                return array();
     1228
     1229        foreach ( (array) $backgrounds as $background ) {
     1230               
     1231                $url = esc_url_raw( $background->guid );
     1232                $background_data = wp_get_attachment_metadata( $background->ID );
     1233                $background_index = basename( $url );
     1234                $background_images[$background_index] = array();
     1235                $background_images[$background_index]['attachment_id'] =  $background->ID;
     1236                $background_images[$background_index]['url'] =  $url;
     1237                $background_images[$background_index]['thumbnail_url'] =  wp_get_attachment_thumb_url($background->ID);
     1238                $background_images[$background_index]['width'] = $background_data['sizes']['thumbnail']['width'];
     1239                $background_images[$background_index]['height'] = $background_data['sizes']['thumbnail']['height'];
     1240        }
     1241
     1242        return $background_images;
     1243}
     1244
     1245/**
    12101246 * Retrieve background image for custom background.
    12111247 *
    12121248 * @since 3.0.0