[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              <# } #>
 177          </script>
 178          <?php
 179      }
 180  
 181      /**
 182       * @return string|void
 183       */
 184  	public function get_current_image_src() {
 185          $src = $this->value();
 186          if ( isset( $this->get_url ) ) {
 187              $src = call_user_func( $this->get_url, $src );
 188              return $src;
 189          }
 190      }
 191  
 192      /**
 193       */
 194  	public function render_content() {
 195          $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
 196          $width      = absint( get_theme_support( 'custom-header', 'width' ) );
 197          $height     = absint( get_theme_support( 'custom-header', 'height' ) );
 198          ?>
 199          <div class="customize-control-content">
 200              <?php
 201              if ( current_theme_supports( 'custom-header', 'video' ) ) {
 202                  echo '<span class="customize-control-title">' . $this->label . '</span>';
 203              }
 204              ?>
 205              <div class="customize-control-notifications-container"></div>
 206              <p class="customizer-section-intro customize-control-description">
 207                  <?php
 208                  if ( current_theme_supports( 'custom-header', 'video' ) ) {
 209                      _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.' );
 210                  } elseif ( $width && $height ) {
 211                      printf(
 212                          /* translators: %s: Header size in pixels. */
 213                          __( '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.' ),
 214                          sprintf( '<strong>%s &times; %s</strong>', $width, $height )
 215                      );
 216                  } elseif ( $width ) {
 217                      printf(
 218                          /* translators: %s: Header width in pixels. */
 219                          __( '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.' ),
 220                          sprintf( '<strong>%s</strong>', $width )
 221                      );
 222                  } else {
 223                      printf(
 224                          /* translators: %s: Header height in pixels. */
 225                          __( '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.' ),
 226                          sprintf( '<strong>%s</strong>', $height )
 227                      );
 228                  }
 229                  ?>
 230              </p>
 231              <div class="current">
 232                  <label for="header_image-button">
 233                      <span class="customize-control-title">
 234                          <?php _e( 'Current header' ); ?>
 235                      </span>
 236                  </label>
 237                  <div class="container">
 238                  </div>
 239              </div>
 240              <div class="actions">
 241                  <?php if ( current_user_can( 'upload_files' ) ) : ?>
 242                  <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
 243                  <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>
 244                  <?php endif; ?>
 245              </div>
 246              <div class="choices">
 247                  <span class="customize-control-title header-previously-uploaded">
 248                      <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
 249                  </span>
 250                  <div class="uploaded">
 251                      <div class="list">
 252                      </div>
 253                  </div>
 254                  <span class="customize-control-title header-default">
 255                      <?php _ex( 'Suggested', 'custom headers' ); ?>
 256                  </span>
 257                  <div class="default">
 258                      <div class="list">
 259                      </div>
 260                  </div>
 261              </div>
 262          </div>
 263          <?php
 264      }
 265  }