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                                 <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}}}" tabindex="0"/>
 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                         <p class="customizer-section-intro">
 170                                 <?php
 171                                 if ( $width && $height ) {
 172                                         /* translators: %s: header size in pixels */
 173                                         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.' ),
 174                                                 sprintf( '<strong>%s &times; %s</strong>', $width, $height )
 175                                         );
 176                                 } elseif ( $width ) {
 177                                         /* translators: %s: header width in pixels */
 178                                         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.' ),
 179                                                 sprintf( '<strong>%s</strong>', $width )
 180                                         );
 181                                 } else {
 182                                         /* translators: %s: header height in pixels */
 183                                         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.' ),
 184                                                 sprintf( '<strong>%s</strong>', $height )
 185                                         );
 186                                 }
 187                                 ?>
 188                         </p>
 189                         <div class="current">
 190                                 <label for="header_image-button">
 191                                         <span class="customize-control-title">
 192                                                 <?php _e( 'Current header' ); ?>
 193                                         </span>
 194                                 </label>
 195                                 <div class="container">
 196                                 </div>
 197                         </div>
 198                         <div class="actions">
 199                                 <?php if ( current_user_can( 'upload_files' ) ): ?>
 200                                 <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
 201                                 <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>
 202                                 <div style="clear:both"></div>
 203                                 <?php endif; ?>
 204                         </div>
 205                         <div class="choices">
 206                                 <span class="customize-control-title header-previously-uploaded">
 207                                         <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
 208                                 </span>
 209                                 <div class="uploaded">
 210                                         <div class="list">
 211                                         </div>
 212                                 </div>
 213                                 <span class="customize-control-title header-default">
 214                                         <?php _ex( 'Suggested', 'custom headers' ); ?>
 215                                 </span>
 216                                 <div class="default">
 217                                         <div class="list">
 218                                         </div>
 219                                 </div>
 220                         </div>
 221                 </div>
 222                 <?php
 223         }
 224 }