logo-resizer.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <?php
  2. /**
  3. * Add postMessage support for site title and description for the Theme Customizer.
  4. *
  5. * @param WP_Customize_Manager $wp_customize Theme Customizer object.
  6. */
  7. function logo_awesomeness_customize_register( $wp_customize ) {
  8. // Logo Resizer additions
  9. $wp_customize->add_setting( 'logo_size', array(
  10. 'default' => 50,
  11. 'type' => 'theme_mod',
  12. 'theme_supports' => 'custom-logo',
  13. 'transport' => 'postMessage',
  14. 'sanitize_callback' => 'absint',
  15. 'sanitize_js_callback' => 'absint',
  16. ) );
  17. $wp_customize->add_control( 'logo_size', array(
  18. 'label' => esc_html__( 'Logo Size' ),
  19. 'section' => 'title_tagline',
  20. 'priority' => 9,
  21. 'type' => 'range',
  22. 'settings' => 'logo_size',
  23. 'input_attrs' => array(
  24. 'step' => 5,
  25. 'min' => 0,
  26. 'max' => 100,
  27. 'aria-valuemin' => 0,
  28. 'aria-valuemax' => 100,
  29. 'aria-valuenow' => 50,
  30. 'aria-orientation' => 'horizontal',
  31. ),
  32. ) );
  33. }
  34. add_action( 'customize_register', 'logo_awesomeness_customize_register' );
  35. /**
  36. * Add support for logo resizing by filtering `get_custom_logo`
  37. */
  38. function logo_awesomeness_customize_logo_resize( $html ) {
  39. $max = [];
  40. $img = [];
  41. $size = get_theme_mod( 'logo_size' );
  42. $custom_logo_id = get_theme_mod( 'custom_logo' );
  43. // set the short side minimum
  44. $min = 48;
  45. // don't use empty() because we can still use a 0
  46. if ( is_numeric( $size ) && is_numeric( $custom_logo_id ) ) {
  47. // we're looking for $img['width'] and $img['height'] of original image
  48. $logo = wp_get_attachment_metadata( $custom_logo_id );
  49. if ( ! $logo ) return $html;
  50. // get the logo support size
  51. $sizes = get_theme_support( 'custom-logo' );
  52. // Check for max height and width, default to image sizes if none set in theme
  53. $max['height'] = isset( $sizes[0]['height'] ) ? $sizes[0]['height'] : $logo['height'];
  54. $max['width'] = isset( $sizes[0]['width'] ) ? $sizes[0]['width'] : $logo['width'];
  55. // landscape or square
  56. if ( $logo['width'] >= $logo['height'] ) {
  57. $output = logo_awesomeness_min_max( $logo['height'], $logo['width'], $max['height'], $max['width'], $size, $min );
  58. $img = array(
  59. 'height' => $output['short'],
  60. 'width' => $output['long']
  61. );
  62. // portrait
  63. } else if ( $logo['width'] < $logo['height'] ) {
  64. $output = logo_awesomeness_min_max( $logo['width'], $logo['height'], $max['width'], $max['height'], $size, $min );
  65. $img = array(
  66. 'height' => $output['long'],
  67. 'width' => $output['short']
  68. );
  69. }
  70. // add the CSS
  71. $css = '
  72. <style>
  73. .custom-logo {
  74. height: ' . $img['height'] . 'px;
  75. max-height: ' . $max['height'] . 'px;
  76. max-width: ' . $max['width'] . 'px;
  77. width: ' . $img['width'] . 'px;
  78. }
  79. </style>';
  80. $html = $css . $html;
  81. }
  82. return $html;
  83. }
  84. add_filter( 'get_custom_logo', 'logo_awesomeness_customize_logo_resize' );
  85. /* Helper function to determine the max size of the logo */
  86. function logo_awesomeness_min_max( $short, $long, $short_max, $long_max, $percent, $min ){
  87. $short ??= 1;
  88. $long ??= 1;
  89. $max = [];
  90. $size = [];
  91. $ratio = ( $long / $short );
  92. $max['long'] = ( $long_max >= $long ) ? $long : $long_max;
  93. $max['short'] = ( $short_max >= ( $max['long'] / $ratio ) ) ? floor( $max['long'] / $ratio ) : $short_max;
  94. $ppp = ( $max['short'] - $min ) / 100;
  95. $size['short'] = round( $min + ( $percent * $ppp ) );
  96. $size['long'] = round( $size['short'] / ( $short / $long ) );
  97. return $size;
  98. }
  99. /**
  100. * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
  101. */
  102. function logo_awesomeness_customize_preview_js() {
  103. wp_enqueue_script( 'logo-awesomeness-customizer', get_template_directory_uri() . '/assets/js/logo/customize-preview.js', array( 'jquery', 'customize-preview' ), '201709081119', true );
  104. }
  105. add_action( 'customize_preview_init', 'logo_awesomeness_customize_preview_js' );
  106. /**
  107. * JS handlers for Customizer Controls
  108. */
  109. function logo_awesomeness_customize_controls_js() {
  110. wp_enqueue_script( 'logo-awesomeness-customizer-controls', get_template_directory_uri() . '/assets/js/logo/customize-controls.js', array( 'jquery', 'customize-controls' ), '20171020', true );
  111. }
  112. add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_controls_js' );
  113. /**
  114. * Adds CSS to the Customizer controls.
  115. */
  116. function logo_awesomeness_customize_css() {
  117. wp_add_inline_style( 'customize-controls', '#customize-control-logo_size input[type=range] { width: 100%; }' );
  118. }
  119. add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_css' );
  120. /**
  121. * Testing function to remove logo_size theme mod
  122. */
  123. function logo_awesomeness_remove_theme_mod() {
  124. if ( isset( $_GET['remove_logo_size'] ) && 'true' == $_GET['remove_logo_size'] ){
  125. set_theme_mod( 'logo_size', '' );
  126. }
  127. }
  128. add_action( 'wp_loaded', 'logo_awesomeness_remove_theme_mod' );