13 * @since 3.4.0 |
13 * @since 3.4.0 |
14 * |
14 * |
15 * @see WP_Customize_Image_Control |
15 * @see WP_Customize_Image_Control |
16 */ |
16 */ |
17 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control { |
17 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control { |
|
18 /** |
|
19 * Customize control type. |
|
20 * |
|
21 * @since 4.2.0 |
|
22 * @var string |
|
23 */ |
18 public $type = 'header'; |
24 public $type = 'header'; |
|
25 |
|
26 /** |
|
27 * Uploaded header images. |
|
28 * |
|
29 * @since 3.9.0 |
|
30 * @var string |
|
31 */ |
19 public $uploaded_headers; |
32 public $uploaded_headers; |
|
33 |
|
34 /** |
|
35 * Default header images. |
|
36 * |
|
37 * @since 3.9.0 |
|
38 * @var string |
|
39 */ |
20 public $default_headers; |
40 public $default_headers; |
21 |
41 |
22 /** |
42 /** |
23 * Constructor. |
43 * Constructor. |
24 * |
44 * |
25 * @since 3.4.0 |
45 * @since 3.4.0 |
26 * |
46 * |
27 * @param WP_Customize_Manager $manager Customizer bootstrap instance. |
47 * @param WP_Customize_Manager $manager Customizer bootstrap instance. |
28 */ |
48 */ |
29 public function __construct( $manager ) { |
49 public function __construct( $manager ) { |
30 parent::__construct( $manager, 'header_image', array( |
50 parent::__construct( |
31 'label' => __( 'Header Image' ), |
51 $manager, |
32 'settings' => array( |
52 'header_image', |
33 'default' => 'header_image', |
53 array( |
34 'data' => 'header_image_data', |
54 'label' => __( 'Header Image' ), |
35 ), |
55 'settings' => array( |
36 'section' => 'header_image', |
56 'default' => 'header_image', |
37 'removed' => 'remove-header', |
57 'data' => 'header_image_data', |
38 'get_url' => 'get_header_image', |
58 ), |
39 ) ); |
59 'section' => 'header_image', |
|
60 'removed' => 'remove-header', |
|
61 'get_url' => 'get_header_image', |
|
62 ) |
|
63 ); |
40 |
64 |
41 } |
65 } |
42 |
66 |
43 /** |
67 /** |
44 */ |
68 */ |
46 wp_enqueue_media(); |
70 wp_enqueue_media(); |
47 wp_enqueue_script( 'customize-views' ); |
71 wp_enqueue_script( 'customize-views' ); |
48 |
72 |
49 $this->prepare_control(); |
73 $this->prepare_control(); |
50 |
74 |
51 wp_localize_script( 'customize-views', '_wpCustomizeHeader', array( |
75 wp_localize_script( |
52 'data' => array( |
76 'customize-views', |
53 'width' => absint( get_theme_support( 'custom-header', 'width' ) ), |
77 '_wpCustomizeHeader', |
54 'height' => absint( get_theme_support( 'custom-header', 'height' ) ), |
78 array( |
55 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ), |
79 'data' => array( |
56 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ), |
80 'width' => absint( get_theme_support( 'custom-header', 'width' ) ), |
57 'currentImgSrc' => $this->get_current_image_src(), |
81 'height' => absint( get_theme_support( 'custom-header', 'height' ) ), |
58 ), |
82 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ), |
59 'nonces' => array( |
83 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ), |
60 'add' => wp_create_nonce( 'header-add' ), |
84 'currentImgSrc' => $this->get_current_image_src(), |
61 'remove' => wp_create_nonce( 'header-remove' ), |
85 ), |
62 ), |
86 'nonces' => array( |
63 'uploads' => $this->uploaded_headers, |
87 'add' => wp_create_nonce( 'header-add' ), |
64 'defaults' => $this->default_headers |
88 'remove' => wp_create_nonce( 'header-remove' ), |
65 ) ); |
89 ), |
|
90 'uploads' => $this->uploaded_headers, |
|
91 'defaults' => $this->default_headers, |
|
92 ) |
|
93 ); |
66 |
94 |
67 parent::enqueue(); |
95 parent::enqueue(); |
68 } |
96 } |
69 |
97 |
70 /** |
98 /** |
71 * |
|
72 * @global Custom_Image_Header $custom_image_header |
99 * @global Custom_Image_Header $custom_image_header |
73 */ |
100 */ |
74 public function prepare_control() { |
101 public function prepare_control() { |
75 global $custom_image_header; |
102 global $custom_image_header; |
76 if ( empty( $custom_image_header ) ) { |
103 if ( empty( $custom_image_header ) ) { |
79 |
106 |
80 add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) ); |
107 add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) ); |
81 |
108 |
82 // Process default headers and uploaded headers. |
109 // Process default headers and uploaded headers. |
83 $custom_image_header->process_default_headers(); |
110 $custom_image_header->process_default_headers(); |
84 $this->default_headers = $custom_image_header->get_default_header_images(); |
111 $this->default_headers = $custom_image_header->get_default_header_images(); |
85 $this->uploaded_headers = $custom_image_header->get_uploaded_header_images(); |
112 $this->uploaded_headers = $custom_image_header->get_uploaded_header_images(); |
86 } |
113 } |
87 |
114 |
88 /** |
115 /** |
89 */ |
116 */ |
158 |
185 |
159 /** |
186 /** |
160 */ |
187 */ |
161 public function render_content() { |
188 public function render_content() { |
162 $visibility = $this->get_current_image_src() ? '' : ' style="display:none" '; |
189 $visibility = $this->get_current_image_src() ? '' : ' style="display:none" '; |
163 $width = absint( get_theme_support( 'custom-header', 'width' ) ); |
190 $width = absint( get_theme_support( 'custom-header', 'width' ) ); |
164 $height = absint( get_theme_support( 'custom-header', 'height' ) ); |
191 $height = absint( get_theme_support( 'custom-header', 'height' ) ); |
165 ?> |
192 ?> |
166 <div class="customize-control-content"> |
193 <div class="customize-control-content"> |
167 <?php if ( current_theme_supports( 'custom-header', 'video' ) ) { |
194 <?php |
|
195 if ( current_theme_supports( 'custom-header', 'video' ) ) { |
168 echo '<span class="customize-control-title">' . $this->label . '</span>'; |
196 echo '<span class="customize-control-title">' . $this->label . '</span>'; |
169 } ?> |
197 } |
|
198 ?> |
170 <div class="customize-control-notifications-container"></div> |
199 <div class="customize-control-notifications-container"></div> |
171 <p class="customizer-section-intro customize-control-description"> |
200 <p class="customizer-section-intro customize-control-description"> |
172 <?php |
201 <?php |
173 if ( current_theme_supports( 'custom-header', 'video' ) ) { |
202 if ( current_theme_supports( 'custom-header', 'video' ) ) { |
174 _e( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image that matches the size of your video — you’ll be able to crop your image once you upload it for a perfect fit.' ); |
203 _e( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image that matches the size of your video — you’ll be able to crop your image once you upload it for a perfect fit.' ); |
175 } elseif ( $width && $height ) { |
204 } elseif ( $width && $height ) { |
176 /* translators: %s: header size in pixels */ |
205 printf( |
177 printf( __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header size of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
206 /* translators: %s: header size in pixels */ |
|
207 __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header size of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
178 sprintf( '<strong>%s × %s</strong>', $width, $height ) |
208 sprintf( '<strong>%s × %s</strong>', $width, $height ) |
179 ); |
209 ); |
180 } elseif ( $width ) { |
210 } elseif ( $width ) { |
181 /* translators: %s: header width in pixels */ |
211 printf( |
182 printf( __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header width of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
212 /* translators: %s: header width in pixels */ |
|
213 __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header width of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
183 sprintf( '<strong>%s</strong>', $width ) |
214 sprintf( '<strong>%s</strong>', $width ) |
184 ); |
215 ); |
185 } else { |
216 } else { |
186 /* translators: %s: header height in pixels */ |
217 printf( |
187 printf( __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header height of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
218 /* translators: %s: header height in pixels */ |
|
219 __( 'Click “Add new image” to upload an image file from your computer. Your theme works best with an image with a header height of %s pixels — you’ll be able to crop your image once you upload it for a perfect fit.' ), |
188 sprintf( '<strong>%s</strong>', $height ) |
220 sprintf( '<strong>%s</strong>', $height ) |
189 ); |
221 ); |
190 } |
222 } |
191 ?> |
223 ?> |
192 </p> |
224 </p> |
198 </label> |
230 </label> |
199 <div class="container"> |
231 <div class="container"> |
200 </div> |
232 </div> |
201 </div> |
233 </div> |
202 <div class="actions"> |
234 <div class="actions"> |
203 <?php if ( current_user_can( 'upload_files' ) ): ?> |
235 <?php if ( current_user_can( 'upload_files' ) ) : ?> |
204 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button> |
236 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button> |
205 <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> |
237 <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> |
206 <?php endif; ?> |
238 <?php endif; ?> |
207 </div> |
239 </div> |
208 <div class="choices"> |
240 <div class="choices"> |