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 }