WordPress 4.7
[autoinstalls/wordpress.git] / wp-includes / customize / class-wp-customize-header-image-control.php
1 <?php
2 /**
3  * Customize API: WP_Customize_Header_Image_Control class
4  *
5  * @package WordPress
6  * @subpackage Customize
7  * @since 4.4.0
8  */
9
10 /**
11  * Customize Header Image Control class.
12  *
13  * @since 3.4.0
14  *
15  * @see WP_Customize_Image_Control
16  */
17 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
18         public $type = 'header';
19         public $uploaded_headers;
20         public $default_headers;
21
22         /**
23          * Constructor.
24          *
25          * @since 3.4.0
26          *
27          * @param WP_Customize_Manager $manager Customizer bootstrap instance.
28          */
29         public function __construct( $manager ) {
30                 parent::__construct( $manager, 'header_image', array(
31                         'label'    => __( 'Header Image' ),
32                         'settings' => array(
33                                 'default' => 'header_image',
34                                 'data'    => 'header_image_data',
35                         ),
36                         'section'  => 'header_image',
37                         'removed'  => 'remove-header',
38                         'get_url'  => 'get_header_image',
39                 ) );
40
41         }
42
43         /**
44          * @access public
45          */
46         public function enqueue() {
47                 wp_enqueue_media();
48                 wp_enqueue_script( 'customize-views' );
49
50                 $this->prepare_control();
51
52                 wp_localize_script( 'customize-views', '_wpCustomizeHeader', array(
53                         'data' => array(
54                                 'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
55                                 'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
56                                 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
57                                 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
58                                 'currentImgSrc' => $this->get_current_image_src(),
59                         ),
60                         'nonces' => array(
61                                 'add' => wp_create_nonce( 'header-add' ),
62                                 'remove' => wp_create_nonce( 'header-remove' ),
63                         ),
64                         'uploads' => $this->uploaded_headers,
65                         'defaults' => $this->default_headers
66                 ) );
67
68                 parent::enqueue();
69         }
70
71         /**
72          *
73          * @global Custom_Image_Header $custom_image_header
74          */
75         public function prepare_control() {
76                 global $custom_image_header;
77                 if ( empty( $custom_image_header ) ) {
78                         return;
79                 }
80
81                 // Process default headers and uploaded headers.
82                 $custom_image_header->process_default_headers();
83                 $this->default_headers = $custom_image_header->get_default_header_images();
84                 $this->uploaded_headers = $custom_image_header->get_uploaded_header_images();
85         }
86
87         /**
88          * @access public
89          */
90         public function print_header_image_template() {
91                 ?>
92                 <script type="text/template" id="tmpl-header-choice">
93                         <# if (data.random) { #>
94                         <button type="button" class="button display-options random">
95                                 <span class="dashicons dashicons-randomize dice"></span>
96                                 <# if ( data.type === 'uploaded' ) { #>
97                                         <?php _e( 'Randomize uploaded headers' ); ?>
98                                 <# } else if ( data.type === 'default' ) { #>
99                                         <?php _e( 'Randomize suggested headers' ); ?>
100                                 <# } #>
101                         </button>
102
103                         <# } else { #>
104
105                         <button type="button" class="choice thumbnail"
106                                 data-customize-image-value="{{{data.header.url}}}"
107                                 data-customize-header-image-data="{{JSON.stringify(data.header)}}">
108                                 <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
109                                 <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
110                         </button>
111
112                         <# if ( data.type === 'uploaded' ) { #>
113                                 <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
114                         <# } #>
115
116                         <# } #>
117                 </script>
118
119                 <script type="text/template" id="tmpl-header-current">
120                         <# if (data.choice) { #>
121                                 <# if (data.random) { #>
122
123                         <div class="placeholder">
124                                 <span class="dashicons dashicons-randomize dice"></span>
125                                 <# if ( data.type === 'uploaded' ) { #>
126                                         <?php _e( 'Randomizing uploaded headers' ); ?>
127                                 <# } else if ( data.type === 'default' ) { #>
128                                         <?php _e( 'Randomizing suggested headers' ); ?>
129                                 <# } #>
130                         </div>
131
132                                 <# } else { #>
133
134                         <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
135
136                                 <# } #>
137                         <# } else { #>
138
139                         <div class="placeholder">
140                                 <?php _e( 'No image set' ); ?>
141                         </div>
142
143                         <# } #>
144                 </script>
145                 <?php
146         }
147
148         /**
149          * @return string|void
150          */
151         public function get_current_image_src() {
152                 $src = $this->value();
153                 if ( isset( $this->get_url ) ) {
154                         $src = call_user_func( $this->get_url, $src );
155                         return $src;
156                 }
157         }
158
159         /**
160          * @access public
161          */
162         public function render_content() {
163                 $this->print_header_image_template();
164                 $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
165                 $width = absint( get_theme_support( 'custom-header', 'width' ) );
166                 $height = absint( get_theme_support( 'custom-header', 'height' ) );
167                 ?>
168                 <div class="customize-control-content">
169                         <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
170                                 echo '<span class="customize-control-title">' . $this->label . '</span>';
171                         } ?>
172                         <div class="customize-control-notifications-container"></div>
173                         <p class="customizer-section-intro customize-control-description">
174                                 <?php
175                                 if ( current_theme_supports( 'custom-header', 'video' ) ) {
176                                         _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
177                                 } elseif ( $width && $height ) {
178                                         /* translators: %s: header size in pixels */
179                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ),
180                                                 sprintf( '<strong>%s &times; %s</strong>', $width, $height )
181                                         );
182                                 } elseif ( $width ) {
183                                         /* translators: %s: header width in pixels */
184                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header width of %s pixels.' ),
185                                                 sprintf( '<strong>%s</strong>', $width )
186                                         );
187                                 } else {
188                                         /* translators: %s: header height in pixels */
189                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header height of %s pixels.' ),
190                                                 sprintf( '<strong>%s</strong>', $height )
191                                         );
192                                 }
193                                 ?>
194                         </p>
195                         <div class="current">
196                                 <label for="header_image-button">
197                                         <span class="customize-control-title">
198                                                 <?php _e( 'Current header' ); ?>
199                                         </span>
200                                 </label>
201                                 <div class="container">
202                                 </div>
203                         </div>
204                         <div class="actions">
205                                 <?php if ( current_user_can( 'upload_files' ) ): ?>
206                                 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
207                                 <button type="button" class="button new" id="header_image-button"  aria-label="<?php esc_attr_e( 'Add new header image' ); ?>"><?php _e( 'Add new image' ); ?></button>
208                                 <div style="clear:both"></div>
209                                 <?php endif; ?>
210                         </div>
211                         <div class="choices">
212                                 <span class="customize-control-title header-previously-uploaded">
213                                         <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
214                                 </span>
215                                 <div class="uploaded">
216                                         <div class="list">
217                                         </div>
218                                 </div>
219                                 <span class="customize-control-title header-default">
220                                         <?php _ex( 'Suggested', 'custom headers' ); ?>
221                                 </span>
222                                 <div class="default">
223                                         <div class="list">
224                                         </div>
225                                 </div>
226                         </div>
227                 </div>
228                 <?php
229         }
230 }