class-wp-customize-header-image-control.php 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  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. * Customize Header Image Control class.
  11. *
  12. * @since 3.4.0
  13. *
  14. * @see WP_Customize_Image_Control
  15. */
  16. class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
  17. public $type = 'header';
  18. public $uploaded_headers;
  19. public $default_headers;
  20. /**
  21. * Constructor.
  22. *
  23. * @since 3.4.0
  24. *
  25. * @param WP_Customize_Manager $manager Customizer bootstrap instance.
  26. */
  27. public function __construct( $manager ) {
  28. parent::__construct( $manager, 'header_image', array(
  29. 'label' => __( 'Header Image' ),
  30. 'settings' => array(
  31. 'default' => 'header_image',
  32. 'data' => 'header_image_data',
  33. ),
  34. 'section' => 'header_image',
  35. 'removed' => 'remove-header',
  36. 'get_url' => 'get_header_image',
  37. ) );
  38. }
  39. /**
  40. * @access public
  41. */
  42. public function enqueue() {
  43. wp_enqueue_media();
  44. wp_enqueue_script( 'customize-views' );
  45. $this->prepare_control();
  46. wp_localize_script( 'customize-views', '_wpCustomizeHeader', array(
  47. 'data' => array(
  48. 'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
  49. 'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
  50. 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
  51. 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
  52. 'currentImgSrc' => $this->get_current_image_src(),
  53. ),
  54. 'nonces' => array(
  55. 'add' => wp_create_nonce( 'header-add' ),
  56. 'remove' => wp_create_nonce( 'header-remove' ),
  57. ),
  58. 'uploads' => $this->uploaded_headers,
  59. 'defaults' => $this->default_headers
  60. ) );
  61. parent::enqueue();
  62. }
  63. /**
  64. *
  65. * @global Custom_Image_Header $custom_image_header
  66. */
  67. public function prepare_control() {
  68. global $custom_image_header;
  69. if ( empty( $custom_image_header ) ) {
  70. return;
  71. }
  72. // Process default headers and uploaded headers.
  73. $custom_image_header->process_default_headers();
  74. $this->default_headers = $custom_image_header->get_default_header_images();
  75. $this->uploaded_headers = $custom_image_header->get_uploaded_header_images();
  76. }
  77. /**
  78. * @access public
  79. */
  80. public function print_header_image_template() {
  81. ?>
  82. <script type="text/template" id="tmpl-header-choice">
  83. <# if (data.random) { #>
  84. <button type="button" class="button display-options random">
  85. <span class="dashicons dashicons-randomize dice"></span>
  86. <# if ( data.type === 'uploaded' ) { #>
  87. <?php _e( 'Randomize uploaded headers' ); ?>
  88. <# } else if ( data.type === 'default' ) { #>
  89. <?php _e( 'Randomize suggested headers' ); ?>
  90. <# } #>
  91. </button>
  92. <# } else { #>
  93. <button type="button" class="choice thumbnail"
  94. data-customize-image-value="{{{data.header.url}}}"
  95. data-customize-header-image-data="{{JSON.stringify(data.header)}}">
  96. <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
  97. <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
  98. </button>
  99. <# if ( data.type === 'uploaded' ) { #>
  100. <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
  101. <# } #>
  102. <# } #>
  103. </script>
  104. <script type="text/template" id="tmpl-header-current">
  105. <# if (data.choice) { #>
  106. <# if (data.random) { #>
  107. <div class="placeholder">
  108. <span class="dashicons dashicons-randomize dice"></span>
  109. <# if ( data.type === 'uploaded' ) { #>
  110. <?php _e( 'Randomizing uploaded headers' ); ?>
  111. <# } else if ( data.type === 'default' ) { #>
  112. <?php _e( 'Randomizing suggested headers' ); ?>
  113. <# } #>
  114. </div>
  115. <# } else { #>
  116. <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
  117. <# } #>
  118. <# } else { #>
  119. <div class="placeholder">
  120. <?php _e( 'No image set' ); ?>
  121. </div>
  122. <# } #>
  123. </script>
  124. <?php
  125. }
  126. /**
  127. * @return string|void
  128. */
  129. public function get_current_image_src() {
  130. $src = $this->value();
  131. if ( isset( $this->get_url ) ) {
  132. $src = call_user_func( $this->get_url, $src );
  133. return $src;
  134. }
  135. }
  136. /**
  137. * @access public
  138. */
  139. public function render_content() {
  140. $this->print_header_image_template();
  141. $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
  142. $width = absint( get_theme_support( 'custom-header', 'width' ) );
  143. $height = absint( get_theme_support( 'custom-header', 'height' ) );
  144. ?>
  145. <div class="customize-control-content">
  146. <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
  147. echo '<span class="customize-control-title">' . $this->label . '</span>';
  148. } ?>
  149. <div class="customize-control-notifications-container"></div>
  150. <p class="customizer-section-intro customize-control-description">
  151. <?php
  152. if ( current_theme_supports( 'custom-header', 'video' ) ) {
  153. _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
  154. } elseif ( $width && $height ) {
  155. /* translators: %s: header size in pixels */
  156. 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.' ),
  157. sprintf( '<strong>%s &times; %s</strong>', $width, $height )
  158. );
  159. } elseif ( $width ) {
  160. /* translators: %s: header width in pixels */
  161. 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.' ),
  162. sprintf( '<strong>%s</strong>', $width )
  163. );
  164. } else {
  165. /* translators: %s: header height in pixels */
  166. 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.' ),
  167. sprintf( '<strong>%s</strong>', $height )
  168. );
  169. }
  170. ?>
  171. </p>
  172. <div class="current">
  173. <label for="header_image-button">
  174. <span class="customize-control-title">
  175. <?php _e( 'Current header' ); ?>
  176. </span>
  177. </label>
  178. <div class="container">
  179. </div>
  180. </div>
  181. <div class="actions">
  182. <?php if ( current_user_can( 'upload_files' ) ): ?>
  183. <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
  184. <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>
  185. <?php endif; ?>
  186. </div>
  187. <div class="choices">
  188. <span class="customize-control-title header-previously-uploaded">
  189. <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
  190. </span>
  191. <div class="uploaded">
  192. <div class="list">
  193. </div>
  194. </div>
  195. <span class="customize-control-title header-default">
  196. <?php _ex( 'Suggested', 'custom headers' ); ?>
  197. </span>
  198. <div class="default">
  199. <div class="list">
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <?php
  205. }
  206. }