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

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