[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       * Enqueues control related scripts/styles.
  69       *
  70       * @since 3.9.0
  71       */
  72  	public function enqueue() {
  73          wp_enqueue_media();
  74          wp_enqueue_script( 'customize-views' );
  75  
  76          $this->prepare_control();
  77  
  78          wp_localize_script(
  79              'customize-views',
  80              '_wpCustomizeHeader',
  81              array(
  82                  'data'     => array(
  83                      'width'         => absint( get_theme_support( 'custom-header', 'width' ) ),
  84                      'height'        => absint( get_theme_support( 'custom-header', 'height' ) ),
  85                      'flex-width'    => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
  86                      'flex-height'   => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
  87                      'currentImgSrc' => $this->get_current_image_src(),
  88                  ),
  89                  'nonces'   => array(
  90                      'add'    => wp_create_nonce( 'header-add' ),
  91                      'remove' => wp_create_nonce( 'header-remove' ),
  92                  ),
  93                  'uploads'  => $this->uploaded_headers,
  94                  'defaults' => $this->default_headers,
  95              )
  96          );
  97  
  98          parent::enqueue();
  99      }
 100  
 101      /**
 102       * Prepares the control.
 103       *
 104       * @since 3.9.0
 105       *
 106       * @global Custom_Image_Header $custom_image_header
 107       */
 108  	public function prepare_control() {
 109          global $custom_image_header;
 110          if ( empty( $custom_image_header ) ) {
 111              return;
 112          }
 113  
 114          add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) );
 115  
 116          // Process default headers and uploaded headers.
 117          $custom_image_header->process_default_headers();
 118          $this->default_headers  = $custom_image_header->get_default_header_images();
 119          $this->uploaded_headers = $custom_image_header->get_uploaded_header_images();
 120      }
 121  
 122      /**
 123       * Prints header image template.
 124       *
 125       * @since 3.9.0
 126       */
 127  	public function print_header_image_template() {
 128          ?>
 129          <script type="text/template" id="tmpl-header-choice">
 130              <# if (data.random) { #>
 131              <button type="button" class="button display-options random">
 132                  <span class="dashicons dashicons-randomize dice"></span>
 133                  <# if ( data.type === 'uploaded' ) { #>
 134                      <?php _e( 'Randomize uploaded headers' ); ?>
 135                  <# } else if ( data.type === 'default' ) { #>
 136                      <?php _e( 'Randomize suggested headers' ); ?>
 137                  <# } #>
 138              </button>
 139  
 140              <# } else { #>
 141  
 142              <button type="button" class="choice thumbnail"
 143                  data-customize-image-value="{{data.header.url}}"
 144                  data-customize-header-image-data="{{JSON.stringify(data.header)}}">
 145                  <span class="screen-reader-text">
 146                      <?php
 147                      /* translators: Hidden accessibility text. */
 148                      _e( 'Set image' );
 149                      ?>
 150                  </span>
 151                  <img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
 152              </button>
 153  
 154              <# if ( data.type === 'uploaded' ) { #>
 155                  <button type="button" class="dashicons dashicons-no close">
 156                      <span class="screen-reader-text">
 157                          <?php
 158                          /* translators: Hidden accessibility text. */
 159                          _e( 'Remove image' );
 160                          ?>
 161                      </span>
 162                  </button>
 163              <# } #>
 164  
 165              <# } #>
 166          </script>
 167  
 168          <script type="text/template" id="tmpl-header-current">
 169              <# if (data.choice) { #>
 170                  <# if (data.random) { #>
 171  
 172              <div class="placeholder">
 173                  <span class="dashicons dashicons-randomize dice"></span>
 174                  <# if ( data.type === 'uploaded' ) { #>
 175                      <?php _e( 'Randomizing uploaded headers' ); ?>
 176                  <# } else if ( data.type === 'default' ) { #>
 177                      <?php _e( 'Randomizing suggested headers' ); ?>
 178                  <# } #>
 179              </div>
 180  
 181                  <# } else { #>
 182  
 183              <img src="{{data.header.thumbnail_url}}" alt="{{data.header.alt_text || data.header.description}}" />
 184  
 185                  <# } #>
 186              <# } #>
 187          </script>
 188          <?php
 189      }
 190  
 191      /**
 192       * Gets current image source.
 193       *
 194       * @since 3.9.0
 195       *
 196       * @return string|null
 197       */
 198  	public function get_current_image_src() {
 199          $src = $this->value();
 200          if ( isset( $this->get_url ) ) {
 201              $src = call_user_func( $this->get_url, $src );
 202              return $src;
 203          }
 204  
 205          return null;
 206      }
 207  
 208      /**
 209       * Renders the control's content.
 210       *
 211       * @since 3.9.0
 212       */
 213  	public function render_content() {
 214          $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
 215          $width      = absint( get_theme_support( 'custom-header', 'width' ) );
 216          $height     = absint( get_theme_support( 'custom-header', 'height' ) );
 217          ?>
 218          <div class="customize-control-content">
 219              <?php
 220              if ( current_theme_supports( 'custom-header', 'video' ) ) {
 221                  echo '<span class="customize-control-title">' . $this->label . '</span>';
 222              }
 223              ?>
 224              <div class="customize-control-notifications-container"></div>
 225              <p class="customizer-section-intro customize-control-description">
 226                  <?php
 227                  if ( current_theme_supports( 'custom-header', 'video' ) ) {
 228                      _e( 'Click &#8220;Add 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.' );
 229                  } elseif ( $width && $height ) {
 230                      printf(
 231                          /* translators: %s: Header size in pixels. */
 232                          __( 'Click &#8220;Add 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.' ),
 233                          sprintf( '<strong>%s &times; %s</strong>', $width, $height )
 234                      );
 235                  } elseif ( $width ) {
 236                      printf(
 237                          /* translators: %s: Header width in pixels. */
 238                          __( 'Click &#8220;Add 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.' ),
 239                          sprintf( '<strong>%s</strong>', $width )
 240                      );
 241                  } else {
 242                      printf(
 243                          /* translators: %s: Header height in pixels. */
 244                          __( 'Click &#8220;Add 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.' ),
 245                          sprintf( '<strong>%s</strong>', $height )
 246                      );
 247                  }
 248                  ?>
 249              </p>
 250              <div class="current">
 251                  <label for="header_image-button">
 252                      <span class="customize-control-title">
 253                          <?php _e( 'Current header' ); ?>
 254                      </span>
 255                  </label>
 256                  <div class="container">
 257                  </div>
 258              </div>
 259              <div class="actions">
 260                  <?php if ( current_user_can( 'upload_files' ) ) : ?>
 261                  <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
 262                  <button type="button" class="button new <?php echo ! $this->get_current_image_src() ? '' : 'customize-header-image-not-selected'; ?>" id="header_image-button" aria-label="<?php esc_attr_e( 'Add Header Image' ); ?>"><?php _e( 'Add Image' ); ?></button>
 263                  <?php endif; ?>
 264              </div>
 265              <div class="choices">
 266                  <span class="customize-control-title header-previously-uploaded">
 267                      <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
 268                  </span>
 269                  <div class="uploaded">
 270                      <div class="list">
 271                      </div>
 272                  </div>
 273                  <span class="customize-control-title header-default">
 274                      <?php _ex( 'Suggested', 'custom headers' ); ?>
 275                  </span>
 276                  <div class="default">
 277                      <div class="list">
 278                      </div>
 279                  </div>
 280              </div>
 281          </div>
 282          <?php
 283      }
 284  }