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 */ 17class 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 */ 24 public $type = 'header'; 25 26 /** 27 * Uploaded header images. 28 * 29 * @since 3.9.0 30 * @var string 31 */ 32 public $uploaded_headers; 33 34 /** 35 * Default header images. 36 * 37 * @since 3.9.0 38 * @var string 39 */ 40 public $default_headers; 41 42 /** 43 * Constructor. 44 * 45 * @since 3.4.0 46 * 47 * @param WP_Customize_Manager $manager Customizer bootstrap instance. 48 */ 49 public function __construct( $manager ) { 50 parent::__construct( 51 $manager, 52 'header_image', 53 array( 54 'label' => __( 'Header Image' ), 55 'settings' => array( 56 'default' => 'header_image', 57 'data' => 'header_image_data', 58 ), 59 'section' => 'header_image', 60 'removed' => 'remove-header', 61 'get_url' => 'get_header_image', 62 ) 63 ); 64 65 } 66 67 /** 68 */ 69 public function enqueue() { 70 wp_enqueue_media(); 71 wp_enqueue_script( 'customize-views' ); 72 73 $this->prepare_control(); 74 75 wp_localize_script( 76 'customize-views', 77 '_wpCustomizeHeader', 78 array( 79 'data' => array( 80 'width' => absint( get_theme_support( 'custom-header', 'width' ) ), 81 'height' => absint( get_theme_support( 'custom-header', 'height' ) ), 82 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ), 83 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ), 84 'currentImgSrc' => $this->get_current_image_src(), 85 ), 86 'nonces' => array( 87 'add' => wp_create_nonce( 'header-add' ), 88 'remove' => wp_create_nonce( 'header-remove' ), 89 ), 90 'uploads' => $this->uploaded_headers, 91 'defaults' => $this->default_headers, 92 ) 93 ); 94 95 parent::enqueue(); 96 } 97 98 /** 99 * @global Custom_Image_Header $custom_image_header 100 */ 101 public function prepare_control() { 102 global $custom_image_header; 103 if ( empty( $custom_image_header ) ) { 104 return; 105 } 106 107 add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) ); 108 109 // Process default headers and uploaded headers. 110 $custom_image_header->process_default_headers(); 111 $this->default_headers = $custom_image_header->get_default_header_images(); 112 $this->uploaded_headers = $custom_image_header->get_uploaded_header_images(); 113 } 114 115 /** 116 */ 117 public function print_header_image_template() { 118 ?> 119 <script type="text/template" id="tmpl-header-choice"> 120 <# if (data.random) { #> 121 <button type="button" class="button display-options random"> 122 <span class="dashicons dashicons-randomize dice"></span> 123 <# if ( data.type === 'uploaded' ) { #> 124 <?php _e( 'Randomize uploaded headers' ); ?> 125 <# } else if ( data.type === 'default' ) { #> 126 <?php _e( 'Randomize suggested headers' ); ?> 127 <# } #> 128 </button> 129 130 <# } else { #> 131 132 <button type="button" class="choice thumbnail" 133 data-customize-image-value="{{{data.header.url}}}" 134 data-customize-header-image-data="{{JSON.stringify(data.header)}}"> 135 <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span> 136 <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" /> 137 </button> 138 139 <# if ( data.type === 'uploaded' ) { #> 140 <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button> 141 <# } #> 142 143 <# } #> 144 </script> 145 146 <script type="text/template" id="tmpl-header-current"> 147 <# if (data.choice) { #> 148 <# if (data.random) { #> 149 150 <div class="placeholder"> 151 <span class="dashicons dashicons-randomize dice"></span> 152 <# if ( data.type === 'uploaded' ) { #> 153 <?php _e( 'Randomizing uploaded headers' ); ?> 154 <# } else if ( data.type === 'default' ) { #> 155 <?php _e( 'Randomizing suggested headers' ); ?> 156 <# } #> 157 </div> 158 159 <# } else { #> 160 161 <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" /> 162 163 <# } #> 164 <# } else { #> 165 166 <div class="placeholder"> 167 <?php _e( 'No image set' ); ?> 168 </div> 169 170 <# } #> 171 </script> 172 <?php 173 } 174 175 /** 176 * @return string|void 177 */ 178 public function get_current_image_src() { 179 $src = $this->value(); 180 if ( isset( $this->get_url ) ) { 181 $src = call_user_func( $this->get_url, $src ); 182 return $src; 183 } 184 } 185 186 /** 187 */ 188 public function render_content() { 189 $visibility = $this->get_current_image_src() ? '' : ' style="display:none" '; 190 $width = absint( get_theme_support( 'custom-header', 'width' ) ); 191 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 192 ?> 193 <div class="customize-control-content"> 194 <?php 195 if ( current_theme_supports( 'custom-header', 'video' ) ) { 196 echo '<span class="customize-control-title">' . $this->label . '</span>'; 197 } 198 ?> 199 <div class="customize-control-notifications-container"></div> 200 <p class="customizer-section-intro customize-control-description"> 201 <?php 202 if ( current_theme_supports( 'custom-header', 'video' ) ) { 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.' ); 204 } elseif ( $width && $height ) { 205 printf( 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.' ), 208 sprintf( '<strong>%s × %s</strong>', $width, $height ) 209 ); 210 } elseif ( $width ) { 211 printf( 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.' ), 214 sprintf( '<strong>%s</strong>', $width ) 215 ); 216 } else { 217 printf( 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.' ), 220 sprintf( '<strong>%s</strong>', $height ) 221 ); 222 } 223 ?> 224 </p> 225 <div class="current"> 226 <label for="header_image-button"> 227 <span class="customize-control-title"> 228 <?php _e( 'Current header' ); ?> 229 </span> 230 </label> 231 <div class="container"> 232 </div> 233 </div> 234 <div class="actions"> 235 <?php if ( current_user_can( 'upload_files' ) ) : ?> 236 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide 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> 238 <?php endif; ?> 239 </div> 240 <div class="choices"> 241 <span class="customize-control-title header-previously-uploaded"> 242 <?php _ex( 'Previously uploaded', 'custom headers' ); ?> 243 </span> 244 <div class="uploaded"> 245 <div class="list"> 246 </div> 247 </div> 248 <span class="customize-control-title header-default"> 249 <?php _ex( 'Suggested', 'custom headers' ); ?> 250 </span> 251 <div class="default"> 252 <div class="list"> 253 </div> 254 </div> 255 </div> 256 </div> 257 <?php 258 } 259} 260