[Summary view] [Print] [Text view]

   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  
  19      /**
  20       * Customize control type.
  21       *
  22       * @since 4.2.0
  23       * @var string
  24       */
  25      public $type = 'header';
  26  
  27      /**
  28       * Uploaded header images.
  29       *
  30       * @since 3.9.0
  31       * @var string
  32       */
  33      public $uploaded_headers;
  34  
  35      /**
  36       * Default header images.
  37       *
  38       * @since 3.9.0
  39       * @var string
  40       */
  41      public $default_headers;
  42  
  43      /**
  44       * Constructor.
  45       *
  46       * @since 3.4.0
  47       *
  48       * @param WP_Customize_Manager $manager Customizer bootstrap instance.
  49       */
  50  	public function __construct( $manager ) {
  51          parent::__construct(
  52              $manager,
  53              'header_image',
  54              array(
  55                  'label'    => __( 'Header Image' ),
  56                  'settings' => array(
  57                      'default' => 'header_image',
  58                      'data'    => 'header_image_data',
  59                  ),
  60                  'section'  => 'header_image',
  61                  'removed'  => 'remove-header',
  62                  'get_url'  => 'get_header_image',
  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">
 136                      <?php
 137                      /* translators: Hidden accessibility text. */
 138                      _e( 'Set image' );
 139                      ?>
 140                  </span>
 141                  <img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
 142              </button>
 143  
 144              <# if ( data.type === 'uploaded' ) { #>
 145                  <button type="button" class="dashicons dashicons-no close">
 146                      <span class="screen-reader-text">
 147                          <?php
 148                          /* translators: Hidden accessibility text. */
 149                          _e( 'Remove image' );
 150                          ?>
 151                      </span>
 152                  </button>
 153              <# } #>
 154  
 155              <# } #>
 156          </script>
 157  
 158          <script type="text/template" id="tmpl-header-current">
 159              <# if (data.choice) { #>
 160                  <# if (data.random) { #>
 161  
 162              <div class="placeholder">
 163                  <span class="dashicons dashicons-randomize dice"></span>
 164                  <# if ( data.type === 'uploaded' ) { #>
 165                      <?php _e( 'Randomizing uploaded headers' ); ?>
 166                  <# } else if ( data.type === 'default' ) { #>
 167                      <?php _e( 'Randomizing suggested headers' ); ?>
 168                  <# } #>
 169              </div>
 170  
 171                  <# } else { #>
 172  
 173              <img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
 174  
 175                  <# } #>
 176              <# } else { #>
 177  
 178              <div class="placeholder">
 179                  <?php _e( 'No image set' ); ?>
 180              </div>
 181  
 182              <# } #>
 183          </script>
 184          <?php
 185      }
 186  
 187      /**
 188       * @return string|void
 189       */
 190  	public function get_current_image_src() {
 191          $src = $this->value();
 192          if ( isset( $this->get_url ) ) {
 193              $src = call_user_func( $this->get_url, $src );
 194              return $src;
 195          }
 196      }
 197  
 198      /**
 199       */
 200  	public function render_content() {
 201          $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
 202          $width      = absint( get_theme_support( 'custom-header', 'width' ) );
 203          $height     = absint( get_theme_support( 'custom-header', 'height' ) );
 204          ?>
 205          <div class="customize-control-content">
 206              <?php
 207              if ( current_theme_supports( 'custom-header', 'video' ) ) {
 208                  echo '<span class="customize-control-title">' . $this->label . '</span>';
 209              }
 210              ?>
 211              <div class="customize-control-notifications-container"></div>
 212              <p class="customizer-section-intro customize-control-description">
 213                  <?php
 214                  if ( current_theme_supports( 'custom-header', 'video' ) ) {
 215                      _e( 'Click &#8220;Add New Image&#8221; to upload an image file from your computer. Your theme works best with an image that matches the size of your video &#8212; you&#8217;ll be able to crop your image once you upload it for a perfect fit.' );
 216                  } elseif ( $width && $height ) {
 217                      printf(
 218                          /* translators: %s: Header size in pixels. */
 219                          __( 'Click &#8220;Add New Image&#8221; to upload an image file from your computer. Your theme works best with an image with a header size of %s pixels &#8212; you&#8217;ll be able to crop your image once you upload it for a perfect fit.' ),
 220                          sprintf( '<strong>%s &times; %s</strong>', $width, $height )
 221                      );
 222                  } elseif ( $width ) {
 223                      printf(
 224                          /* translators: %s: Header width in pixels. */
 225                          __( 'Click &#8220;Add New Image&#8221; to upload an image file from your computer. Your theme works best with an image with a header width of %s pixels &#8212; you&#8217;ll be able to crop your image once you upload it for a perfect fit.' ),
 226                          sprintf( '<strong>%s</strong>', $width )
 227                      );
 228                  } else {
 229                      printf(
 230                          /* translators: %s: Header height in pixels. */
 231                          __( 'Click &#8220;Add New Image&#8221; to upload an image file from your computer. Your theme works best with an image with a header height of %s pixels &#8212; you&#8217;ll be able to crop your image once you upload it for a perfect fit.' ),
 232                          sprintf( '<strong>%s</strong>', $height )
 233                      );
 234                  }
 235                  ?>
 236              </p>
 237              <div class="current">
 238                  <label for="header_image-button">
 239                      <span class="customize-control-title">
 240                          <?php _e( 'Current header' ); ?>
 241                      </span>
 242                  </label>
 243                  <div class="container">
 244                  </div>
 245              </div>
 246              <div class="actions">
 247                  <?php if ( current_user_can( 'upload_files' ) ) : ?>
 248                  <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
 249                  <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>
 250                  <?php endif; ?>
 251              </div>
 252              <div class="choices">
 253                  <span class="customize-control-title header-previously-uploaded">
 254                      <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
 255                  </span>
 256                  <div class="uploaded">
 257                      <div class="list">
 258                      </div>
 259                  </div>
 260                  <span class="customize-control-title header-default">
 261                      <?php _ex( 'Suggested', 'custom headers' ); ?>
 262                  </span>
 263                  <div class="default">
 264                      <div class="list">
 265                      </div>
 266                  </div>
 267              </div>
 268          </div>
 269          <?php
 270      }
 271  }