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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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. */
  41. public function enqueue() {
  42. wp_enqueue_media();
  43. wp_enqueue_script( 'customize-views' );
  44. $this->prepare_control();
  45. wp_localize_script( 'customize-views', '_wpCustomizeHeader', array(
  46. 'data' => array(
  47. 'width' => absint( get_theme_support( 'custom-header', 'width' ) ),
  48. 'height' => absint( get_theme_support( 'custom-header', 'height' ) ),
  49. 'flex-width' => absint( get_theme_support( 'custom-header', 'flex-width' ) ),
  50. 'flex-height' => absint( get_theme_support( 'custom-header', 'flex-height' ) ),
  51. 'currentImgSrc' => $this->get_current_image_src(),
  52. ),
  53. 'nonces' => array(
  54. 'add' => wp_create_nonce( 'header-add' ),
  55. 'remove' => wp_create_nonce( 'header-remove' ),
  56. ),
  57. 'uploads' => $this->uploaded_headers,
  58. 'defaults' => $this->default_headers
  59. ) );
  60. parent::enqueue();
  61. }
  62. /**
  63. *
  64. * @global Custom_Image_Header $custom_image_header
  65. */
  66. public function prepare_control() {
  67. global $custom_image_header;
  68. if ( empty( $custom_image_header ) ) {
  69. return;
  70. }
  71. add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) );
  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. */
  79. public function print_header_image_template() {
  80. ?>
  81. <script type="text/template" id="tmpl-header-choice">
  82. <# if (data.random) { #>
  83. <button type="button" class="button display-options random">
  84. <span class="dashicons dashicons-randomize dice"></span>
  85. <# if ( data.type === 'uploaded' ) { #>
  86. <?php _e( 'Randomize uploaded headers' ); ?>
  87. <# } else if ( data.type === 'default' ) { #>
  88. <?php _e( 'Randomize suggested headers' ); ?>
  89. <# } #>
  90. </button>
  91. <# } else { #>
  92. <button type="button" class="choice thumbnail"
  93. data-customize-image-value="{{{data.header.url}}}"
  94. data-customize-header-image-data="{{JSON.stringify(data.header)}}">
  95. <span class="screen-reader-text"><?php _e( 'Set image' ); ?></span>
  96. <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
  97. </button>
  98. <# if ( data.type === 'uploaded' ) { #>
  99. <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
  100. <# } #>
  101. <# } #>
  102. </script>
  103. <script type="text/template" id="tmpl-header-current">
  104. <# if (data.choice) { #>
  105. <# if (data.random) { #>
  106. <div class="placeholder">
  107. <span class="dashicons dashicons-randomize dice"></span>
  108. <# if ( data.type === 'uploaded' ) { #>
  109. <?php _e( 'Randomizing uploaded headers' ); ?>
  110. <# } else if ( data.type === 'default' ) { #>
  111. <?php _e( 'Randomizing suggested headers' ); ?>
  112. <# } #>
  113. </div>
  114. <# } else { #>
  115. <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
  116. <# } #>
  117. <# } else { #>
  118. <div class="placeholder">
  119. <?php _e( 'No image set' ); ?>
  120. </div>
  121. <# } #>
  122. </script>
  123. <?php
  124. }
  125. /**
  126. * @return string|void
  127. */
  128. public function get_current_image_src() {
  129. $src = $this->value();
  130. if ( isset( $this->get_url ) ) {
  131. $src = call_user_func( $this->get_url, $src );
  132. return $src;
  133. }
  134. }
  135. /**
  136. */
  137. public function render_content() {
  138. $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
  139. $width = absint( get_theme_support( 'custom-header', 'width' ) );
  140. $height = absint( get_theme_support( 'custom-header', 'height' ) );
  141. ?>
  142. <div class="customize-control-content">
  143. <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
  144. echo '<span class="customize-control-title">' . $this->label . '</span>';
  145. } ?>
  146. <div class="customize-control-notifications-container"></div>
  147. <p class="customizer-section-intro customize-control-description">
  148. <?php
  149. if ( current_theme_supports( 'custom-header', 'video' ) ) {
  150. _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.' );
  151. } elseif ( $width && $height ) {
  152. /* translators: %s: header size in pixels */
  153. printf( __( '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.' ),
  154. sprintf( '<strong>%s &times; %s</strong>', $width, $height )
  155. );
  156. } elseif ( $width ) {
  157. /* translators: %s: header width in pixels */
  158. printf( __( '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.' ),
  159. sprintf( '<strong>%s</strong>', $width )
  160. );
  161. } else {
  162. /* translators: %s: header height in pixels */
  163. printf( __( '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.' ),
  164. sprintf( '<strong>%s</strong>', $height )
  165. );
  166. }
  167. ?>
  168. </p>
  169. <div class="current">
  170. <label for="header_image-button">
  171. <span class="customize-control-title">
  172. <?php _e( 'Current header' ); ?>
  173. </span>
  174. </label>
  175. <div class="container">
  176. </div>
  177. </div>
  178. <div class="actions">
  179. <?php if ( current_user_can( 'upload_files' ) ): ?>
  180. <button type="button"<?php echo $visibility; ?> class="button remove" aria-label="<?php esc_attr_e( 'Hide header image' ); ?>"><?php _e( 'Hide image' ); ?></button>
  181. <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>
  182. <?php endif; ?>
  183. </div>
  184. <div class="choices">
  185. <span class="customize-control-title header-previously-uploaded">
  186. <?php _ex( 'Previously uploaded', 'custom headers' ); ?>
  187. </span>
  188. <div class="uploaded">
  189. <div class="list">
  190. </div>
  191. </div>
  192. <span class="customize-control-title header-default">
  193. <?php _ex( 'Suggested', 'custom headers' ); ?>
  194. </span>
  195. <div class="default">
  196. <div class="list">
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <?php
  202. }
  203. }