Ticket #18623: choose-background-images.diff

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

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

Line 
1
2
3Index: wp-admin/css/wp-admin.dev.css
4===================================================================
5--- wp-admin/css/wp-admin.dev.css       (revision 20171)
6+++ wp-admin/css/wp-admin.dev.css       (working copy)
7@@ -4312,6 +4312,26 @@
8        max-height: 300px;
9 }
10 
11+.appearance_page_custom-background .available-backgrounds .default-background {
12+       float: left;
13+       margin: 0 20px 20px 0;
14+}
15+
16+.appearance_page_custom-background .random-background {
17+       clear: both;
18+       margin: 0 20px 20px 0;
19+       vertical-align: middle;
20+}
21+
22+.appearance_page_custom-background .available-backgrounds label input,
23+.appearance_page_custom-background .random-background label input {
24+       margin-right: 10px;
25+}
26+
27+.appearance_page_custom-background .available-backgrounds label img {
28+       vertical-align: middle;
29+}
30+
31 
32 /*------------------------------------------------------------------------------
33   16.3 - Tabbed Admin Screen Interface (Experimental)
34Index: wp-admin/custom-background.php
35===================================================================
36--- wp-admin/custom-background.php      (revision 20171)
37+++ wp-admin/custom-background.php      (working copy)
38@@ -69,6 +69,8 @@
39                add_action("load-$page", array(&$this, 'admin_load'));
40                add_action("load-$page", array(&$this, 'take_action'), 49);
41                add_action("load-$page", array(&$this, 'handle_upload'), 49);
42+               add_action("load-$page", array(&$this, 'settings'), 50);
43+               add_action('admin_notices', array(&$this, 'admin_notices'));
44 
45                if ( $this->admin_header_callback )
46                        add_action("admin_head-$page", $this->admin_header_callback, 51);
47@@ -99,6 +101,188 @@
48                wp_enqueue_script('custom-background');
49                wp_enqueue_style('farbtastic');
50        }
51+       
52+       function settings() {
53+               if ( $this->admin_image_div_callback ) {
54+                       call_user_func($this->admin_image_div_callback);
55+               } else {
56+                       add_settings_section( 'background-image', false, '__return_false', 'custom-background-image' );
57+                       add_settings_field( 'preview', __('Preview'), array(&$this, 'preview_field'), 'custom-background-image', 'background-image' );
58+                       add_settings_field( 'custom-background-upload', __('Upload Image'), array(&$this, 'background_upload_field'), 'custom-background-image', 'background-image' );
59+               }
60+               
61+               add_settings_section( 'display-options', __('Display Options'), '__return_false', $this->page );
62+               add_settings_field( 'background-selection', __('Uploaded Images'), array(&$this, 'background_selection_field'), $this->page, 'display-options' );
63+               if ( get_background_image() )
64+                               add_settings_field( 'remove-background', __('Remove Image'), array(&$this, 'remove_background_field'), $this->page, 'display-options' );
65+                       
66+               if ( defined( 'BACKGROUND_IMAGE' ) )
67+                       add_settings_field( 'reset-background', __('Restore Original Image'), array(&$this, 'reset_background_field'), $this->page, 'display-options' );
68+               
69+               if ( get_background_image() ) {
70+                       add_settings_field( 'background-position', __('Position'), array(&$this, 'background_position_field'), $this->page, 'display-options' );
71+                       add_settings_field( 'background-repeat', __('Repeat'), array(&$this, 'background_repeat_field'), $this->page, 'display-options' );
72+                       add_settings_field( 'background-attachment', __('Attachment'), array(&$this, 'background_attachment_field'), $this->page, 'display-options' );
73+               }
74+               add_settings_field( 'background-color', __('Background Color'), array(&$this, 'background_color_field'), $this->page, 'display-options' );
75+       }
76+       
77+       function preview_field() {
78+               $background_styles = '';
79+               if ( $bgcolor = get_background_color() )
80+                       $background_styles .= 'background-color: #' . $bgcolor . ';';
81+               
82+               if ( get_background_image() ) {
83+                       // background-image URL must be single quote, see below
84+                       $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
85+                               . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
86+                               . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
87+               }
88+               ?>
89+               <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
90+               <?php if ( get_background_image() ) { ?>
91+               <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
92+               <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
93+               <?php } ?>
94+               </div>
95+               <?php
96+       }
97+       
98+       function background_upload_field() {
99+               ?>
100+               <form enctype="multipart/form-data" id="upload-form" method="post" action="">
101+               <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br />
102+               <input type="file" id="upload" name="import" />
103+               <input type="hidden" name="action" value="save" />
104+               <?php
105+               wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload');
106+               submit_button( __( 'Upload' ), 'button', 'submit', false );
107+               ?>
108+               </form>
109+               <?php
110+       }
111+       
112+       function background_selection_field() {
113+               $backgrounds = get_uploaded_background_images();
114+
115+               /* TODO
116+               if ( 1 < count( $backgrounds ) ) {
117+                       echo '<div class="random-header">';
118+                       echo '<label><input name="default-header" type="radio" value="random-' . $type . '-image"' . checked( is_random_header_image( $type ), true, false ) . ' />';
119+                       echo __( '<strong>Random:</strong> Show a different image on each page.' );
120+                       echo '</label>';
121+                       echo '</div>';
122+               }*/
123+               echo '<p>';
124+               _e( 'You can choose one of your previously uploaded backgrounds.' );
125+               echo '</p>';
126+               
127+               echo '<div class="available-backgrounds">';
128+               foreach ( $backgrounds as $background_key => $background ) {
129+                       $background_thumbnail = $background['thumbnail_url'];
130+                       $background_url = $background['url'];
131+                       $background_desc = empty( $background['description'] ) ? '' : $background['description'];
132+                       echo '<div class="default-background">';
133+                       echo '<label><input name="default-background" type="radio" value="' . esc_attr( $background_key ) . '" ' . checked( $background_url, get_theme_mod( 'background_image' ), false ) . ' />';
134+                       $width = '';
135+                       if ( !empty( $background['attachment_id'] ) )
136+                               $width = ' width="' . $background['width'] . '"';
137+                       echo '<img src="' . $background_thumbnail . '" alt="' . esc_attr( $background_desc ) .'" title="' . esc_attr( $background_desc ) . '"' . $width . ' /></label>';
138+                       echo '</div>';
139+               }
140+               echo '<div class="clear"></div></div>';
141+       }
142+       
143+       function remove_background_field() {
144+               submit_button( __( 'Remove Background Image' ), 'button', 'remove-background', false ); ?>
145+               <span class="description"><?php _e('This will remove the background image. You will not be able to restore any customizations.'); ?></span><?php
146+       }
147+       
148+       function restore_background_field() {
149+               submit_button( __( 'Restore Original Image' ), 'button', 'reset-background', false ); ?>
150+               <span class="description"><?php _e('This will restore the original background image. You will not be able to restore any customizations.'); ?></span><?php
151+       }
152+       
153+       function background_position_field() {
154+               ?>
155+               <fieldset>
156+                       <legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
157+                       <label>
158+                               <input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
159+                               <?php _e('Left') ?>
160+                       </label>
161+                       <label>
162+                               <input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
163+                               <?php _e('Center') ?>
164+                       </label>
165+                       <label>
166+                               <input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
167+                               <?php _e('Right') ?>
168+                       </label>
169+               </fieldset>
170+               <?php
171+       }
172+       
173+       function background_repeat_field() {
174+               ?>
175+               <fieldset>
176+                       <legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
177+                       <label>
178+                               <input type="radio" name="background-repeat" value="no-repeat"<?php checked('no-repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
179+                               <?php _e('No Repeat'); ?>
180+                       </label>
181+                       <label>
182+                               <input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> />
183+                               <?php _e('Tile'); ?>
184+                       </label>
185+                       <label>
186+                               <input type="radio" name="background-repeat" value="repeat-x"<?php checked('repeat-x', get_theme_mod('background_repeat', 'repeat')); ?> />
187+                               <?php _e('Tile Horizontally'); ?>
188+                       </label>
189+                       <label>
190+                               <input type="radio" name="background-repeat" value="repeat-y"<?php checked('repeat-y', get_theme_mod('background_repeat', 'repeat')); ?> />
191+                               <?php _e('Tile Vertically'); ?>
192+                       </label>
193+               </fieldset>
194+               <?php
195+       }
196+       
197+       function background_attachment_field() {
198+               ?>
199+               <fieldset>
200+                       <legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
201+                       <label>
202+                               <input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'scroll')); ?> />
203+                               <?php _e('Scroll') ?>
204+                       </label>
205+                       <label>
206+                               <input name="background-attachment" type="radio" value="fixed" <?php checked('fixed', get_theme_mod('background_attachment', 'scroll')); ?> />
207+                               <?php _e('Fixed') ?>
208+                       </label>
209+               </fieldset>
210+               <?php
211+       }
212+       
213+       function background_color_field() {
214+               ?>
215+               <fieldset>
216+                       <legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
217+                       <?php $show_clear = get_background_color() ? '' : ' style="display:none"'; ?>
218+                       <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
219+                       <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>
220+                       <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
221+               </fieldset>
222+               <?php
223+       }
224+       
225+       function updated() {
226+               if ( ! get_settings_errors('custom-background') )
227+                       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' );
228+       }
229+       
230+       function admin_notices() {
231+               settings_errors( 'custom-background' );
232+       }
233 
234        /**
235         * Execute custom background modification.
236@@ -109,12 +293,12 @@
237 
238                if ( empty($_POST) )
239                        return;
240-
241+               check_admin_referer('custom-background');
242+               
243                if ( isset($_POST['reset-background']) ) {
244-                       check_admin_referer('custom-background-reset', '_wpnonce-custom-background-reset');
245                        remove_theme_mod('background_image');
246                        remove_theme_mod('background_image_thumb');
247-                       $this->updated = true;
248+                       $this->updated();
249                        return;
250                }
251 
252@@ -120,10 +304,9 @@
253 
254                if ( isset($_POST['remove-background']) ) {
255                        // @TODO: Uploaded files are not removed here.
256-                       check_admin_referer('custom-background-remove', '_wpnonce-custom-background-remove');
257                        set_theme_mod('background_image', '');
258                        set_theme_mod('background_image_thumb', '');
259-                       $this->updated = true;
260+                       $this->updated();
261                        return;
262                }
263 
264@@ -128,7 +311,6 @@
265                }
266 
267                if ( isset($_POST['background-repeat']) ) {
268-                       check_admin_referer('custom-background');
269                        if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
270                                $repeat = $_POST['background-repeat'];
271                        else
272@@ -137,7 +319,6 @@
273                }
274 
275                if ( isset($_POST['background-position-x']) ) {
276-                       check_admin_referer('custom-background');
277                        if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
278                                $position = $_POST['background-position-x'];
279                        else
280@@ -146,7 +327,6 @@
281                }
282 
283                if ( isset($_POST['background-attachment']) ) {
284-                       check_admin_referer('custom-background');
285                        if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
286                                $attachment = $_POST['background-attachment'];
287                        else
288@@ -155,7 +335,6 @@
289                }
290 
291                if ( isset($_POST['background-color']) ) {
292-                       check_admin_referer('custom-background');
293                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
294                        if ( strlen($color) == 6 || strlen($color) == 3 )
295                                set_theme_mod('background_color', $color);
296@@ -162,8 +341,16 @@
297                        else
298                                set_theme_mod('background_color', '');
299                }
300+               
301+               if ( isset( $_POST['default-background'] ) ) {
302+                       $uploaded = get_uploaded_background_images();
303+                       if ( isset( $uploaded[$_POST['default-background']] ) ) {
304+                               set_theme_mod( 'background_image', esc_url( $uploaded[$_POST['default-background']]['url'] ) );
305+                               set_theme_mod( 'background_image_thumb', esc_url( $uploaded[$_POST['default-background']]['thumbnail_url'] ) );
306+                       }
307+               }
308 
309-               $this->updated = true;
310+               $this->updated();
311        }
312 
313        /**
314@@ -174,148 +361,18 @@
315        function admin_page() {
316 ?>
317 <div class="wrap" id="custom-background">
318-<?php screen_icon(); ?>
319-<h2><?php _e('Custom Background'); ?></h2>
320-<?php if ( !empty($this->updated) ) { ?>
321-<div id="message" class="updated">
322-<p><?php printf( __( 'Background updated. <a href="%s">Visit your site</a> to see how it looks.' ), home_url( '/' ) ); ?></p>
323+       <?php screen_icon(); ?>
324+       <h2><?php _e('Custom Background'); ?></h2>
325+       
326+       <?php do_settings_sections( 'custom-background-image' );?>
327+       
328+       <form method="post" action="">
329+       <?php
330+       do_settings_sections( $this->page );
331+       wp_nonce_field( 'custom-background' );
332+       submit_button( null, 'primary', 'save-background-options' ); ?>
333+       </form>
334 </div>
335-<?php }
336-
337-       if ( $this->admin_image_div_callback ) {
338-               call_user_func($this->admin_image_div_callback);
339-       } else {
340-?>
341-<h3><?php _e('Background Image'); ?></h3>
342-<table class="form-table">
343-<tbody>
344-<tr valign="top">
345-<th scope="row"><?php _e('Preview'); ?></th>
346-<td>
347-<?php
348-$background_styles = '';
349-if ( $bgcolor = get_background_color() )
350-       $background_styles .= 'background-color: #' . $bgcolor . ';';
351-
352-if ( get_background_image() ) {
353-       // background-image URL must be single quote, see below
354-       $background_styles .= ' background-image: url(\'' . get_theme_mod('background_image_thumb', '') . '\');'
355-               . ' background-repeat: ' . get_theme_mod('background_repeat', 'repeat') . ';'
356-               . ' background-position: top ' . get_theme_mod('background_position_x', 'left');
357-}
358-?>
359-<div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
360-<?php if ( get_background_image() ) { ?>
361-<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
362-<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
363-<?php } ?>
364-</div>
365-<?php } ?>
366-</td>
367-</tr>
368-<?php if ( get_background_image() ) : ?>
369-<tr valign="top">
370-<th scope="row"><?php _e('Remove Image'); ?></th>
371-<td>
372-<form method="post" action="">
373-<?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
374-<?php submit_button( __( 'Remove Background Image' ), 'button', 'remove-background', false ); ?><br/>
375-<?php _e('This will remove the background image. You will not be able to restore any customizations.') ?>
376-</form>
377-</td>
378-</tr>
379-<?php endif; ?>
380-
381-<?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
382-<tr valign="top">
383-<th scope="row"><?php _e('Restore Original Image'); ?></th>
384-<td>
385-<form method="post" action="">
386-<?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
387-<?php submit_button( __( 'Restore Original Image' ), 'button', 'reset-background', false ); ?><br/>
388-<?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?>
389-</form>
390-</td>
391-</tr>
392-
393-<?php endif; ?>
394-<tr valign="top">
395-<th scope="row"><?php _e('Upload Image'); ?></th>
396-<td><form enctype="multipart/form-data" id="upload-form" method="post" action="">
397-<label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
398-<input type="hidden" name="action" value="save" />
399-<?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
400-<?php submit_button( __( 'Upload' ), 'button', 'submit', false ); ?>
401-</form>
402-</td>
403-</tr>
404-</tbody>
405-</table>
406-
407-<h3><?php _e('Display Options') ?></h3>
408-<form method="post" action="">
409-<table class="form-table">
410-<tbody>
411-<?php if ( get_background_image() ) : ?>
412-<tr valign="top">
413-<th scope="row"><?php _e( 'Position' ); ?></th>
414-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
415-<label>
416-<input name="background-position-x" type="radio" value="left"<?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
417-<?php _e('Left') ?>
418-</label>
419-<label>
420-<input name="background-position-x" type="radio" value="center"<?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
421-<?php _e('Center') ?>
422-</label>
423-<label>
424-<input name="background-position-x" type="radio" value="right"<?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
425-<?php _e('Right') ?>
426-</label>
427-</fieldset></td>
428-</tr>
429-
430-<tr valign="top">
431-<th scope="row"><?php _e( 'Repeat' ); ?></th>
432-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
433-<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>
434-       <label><input type="radio" name="background-repeat" value="repeat"<?php checked('repeat', get_theme_mod('background_repeat', 'repeat')); ?> /> <?php _e('Tile'); ?></label>
435-       <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>
436-       <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>
437-</fieldset></td>
438-</tr>
439-
440-<tr valign="top">
441-<th scope="row"><?php _e( 'Attachment' ); ?></th>
442-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
443-<label>
444-<input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'scroll')); ?> />
445-<?php _e('Scroll') ?>
446-</label>
447-<label>
448-<input name="background-attachment" type="radio" value="fixed" <?php checked('fixed', get_theme_mod('background_attachment', 'scroll')); ?> />
449-<?php _e('Fixed') ?>
450-</label>
451-</fieldset></td>
452-</tr>
453-<?php endif; // get_background_image() ?>
454-<tr valign="top">
455-<th scope="row"><?php _e( 'Background Color' ); ?></th>
456-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
457-<?php $show_clear = get_background_color() ? '' : ' style="display:none"'; ?>
458-<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
459-<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>
460-<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
461-</fieldset></td>
462-</tr>
463-</tbody>
464-</table>
465-
466-<?php wp_nonce_field('custom-background'); ?>
467-<?php submit_button( null, 'primary', 'save-background-options' ); ?>
468-</form>
469-
470-</div>
471 <?php
472        }
473 
474@@ -363,7 +420,7 @@
475                set_theme_mod('background_image_thumb', esc_url( $thumbnail[0] ) );
476 
477                do_action('wp_create_file_in_uploads', $file, $id); // For replication
478-               $this->updated = true;
479+               $this->updated();
480        }
481 
482 }
483
484
485Index: wp-includes/theme.php
486===================================================================
487--- wp-includes/theme.php       (revision 20171)
488+++ wp-includes/theme.php       (working copy)
489@@ -1207,6 +1207,42 @@
490 }
491 
492 /**
493+ * Get the header images uploaded for the current theme.
494+ *
495+ * @return array
496+ */
497+function get_uploaded_background_images() {
498+       $background_images = array();
499+
500+       // @todo caching
501+       $backgrounds = get_posts( array(
502+               'post_type' => 'attachment',
503+               'meta_key' => '_wp_attachment_is_custom_background',
504+               'meta_value' => get_option('stylesheet'),
505+               'orderby' => 'none',
506+               'nopaging' => true
507+       ) );
508+       
509+       if ( empty( $backgrounds ) )
510+               return array();
511+
512+       foreach ( (array) $backgrounds as $background ) {
513+               
514+               $url = esc_url_raw( $background->guid );
515+               $background_data = wp_get_attachment_metadata( $background->ID );
516+               $background_index = basename( $url );
517+               $background_images[$background_index] = array();
518+               $background_images[$background_index]['attachment_id'] =  $background->ID;
519+               $background_images[$background_index]['url'] =  $url;
520+               $background_images[$background_index]['thumbnail_url'] =  wp_get_attachment_thumb_url($background->ID);
521+               $background_images[$background_index]['width'] = $background_data['sizes']['thumbnail']['width'];
522+               $background_images[$background_index]['height'] = $background_data['sizes']['thumbnail']['height'];
523+       }
524+
525+       return $background_images;
526+}
527+
528+/**
529  * Retrieve background image for custom background.
530  *
531  * @since 3.0.0