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                         <# if (data.type === 'uploaded') { #>
 106                                 <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
 107                         <# } #>
 108
 109                         <button type="button" class="choice thumbnail"
 110                                 data-customize-image-value="{{{data.header.url}}}"
 111                                 data-customize-header-image-data="{{JSON.stringify(data.header)}}">
 112                                 <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
 113                                 <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
 114                         </button>
 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                                 <div class="inner">
 125                                         <span><span class="dashicons dashicons-randomize dice"></span>
 126                                         <# if ( data.type === 'uploaded' ) { #>
 127                                                 <?php _e( 'Randomizing uploaded headers' ); ?>
 128                                         <# } else if ( data.type === 'default' ) { #>
 129                                                 <?php _e( 'Randomizing suggested headers' ); ?>
 130                                         <# } #>
 131                                         </span>
 132                                 </div>
 133                         </div>
 134
 135                                 <# } else { #>
 136
 137                         <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
 138
 139                                 <# } #>
 140                         <# } else { #>
 141
 142                         <div class="placeholder">
 143                                 <div class="inner">
 144                                         <span>
 145                                                 <?php _e( 'No image set' ); ?>
 146                                         </span>
 147                                 </div>
 148                         </div>
 149
 150                         <# } #>
 151                 </script>
 152                 <?php
 153         }
 154
 155         /**
 156          * @return string|void
 157          */
 158         public function get_current_image_src() {
 159                 $src = $this->value();
 160                 if ( isset( $this->get_url ) ) {
 161                         $src = call_user_func( $this->get_url, $src );
 162                         return $src;
 163                 }
 164         }
 165
 166         /**
 167          * @access public
 168          */
 169         public function render_content() {
 170                 $this->print_header_image_template();
 171                 $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
 172                 $width = absint( get_theme_support( 'custom-header', 'width' ) );
 173                 $height = absint( get_theme_support( 'custom-header', 'height' ) );
 174                 ?>
 175                 <div class="customize-control-content">
 176                         <p class="customizer-section-intro">
 177                                 <?php
 178                                 if ( $width && $height ) {
 179                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of <strong>%s &times; %s</strong> pixels.' ), $width, $height );
 180                                 } elseif ( $width ) {
 181                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header width of <strong>%s</strong> pixels.' ), $width );
 182                                 } else {
 183                                         printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header height of <strong>%s</strong> pixels.' ), $height );
 184                                 }
 185                                 ?>
 186                         </p>
 187                         <div class="current">
 188                                 <label for="header_image-button">
 189                                         <span class="customize-control-title">
 190                                                 <?php _e( 'Current header' ); ?>
 191                                         </span>
 192                                 </label>
 193                                 <div class="container">
 194                                 </div>
 195                         </div>
 196                         <div class="actions">
 197                                 <?php if ( current_user_can( 'upload_files' ) ): ?>
 198                                 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
 199                                 <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>
 200                                 <div style="clear:both"></div>
 201                                 <?php endif; ?>
 202                         </div>
 203                         <div class="choices">
 204                                 <span class="customize-control-title header-previously-uploaded">
 205                                         <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
 206                                 </span>
 207                                 <div class="uploaded">
 208                                         <div class="list">
 209                                         </div>
 210                                 </div>
 211                                 <span class="customize-control-title header-default">
 212                                         <?php _ex( 'Suggested', 'custom headers' ); ?>
 213                                 </span>
 214                                 <div class="default">
 215                                         <div class="list">
 216                                         </div>
 217                                 </div>
 218                         </div>
 219                 </div>
 220                 <?php
 221         }
 222 }