logo-resizer.php 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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. $size = get_theme_mod( 'logo_size' );
  40. $custom_logo_id = get_theme_mod( 'custom_logo' );
  41. // set the short side minimum
  42. $min = 48;
  43. // don't use empty() because we can still use a 0
  44. if ( is_numeric( $size ) && is_numeric( $custom_logo_id ) ) {
  45. // we're looking for $img['width'] and $img['height'] of original image
  46. $logo = wp_get_attachment_metadata( $custom_logo_id );
  47. if ( ! $logo ) return $html;
  48. // get the logo support size
  49. $sizes = get_theme_support( 'custom-logo' );
  50. // Check for max height and width, default to image sizes if none set in theme
  51. $max['height'] = isset( $sizes[0]['height'] ) ? $sizes[0]['height'] : $logo['height'];
  52. $max['width'] = isset( $sizes[0]['width'] ) ? $sizes[0]['width'] : $logo['width'];
  53. // landscape or square
  54. if ( $logo['width'] >= $logo['height'] ) {
  55. $output = logo_awesomeness_min_max( $logo['height'], $logo['width'], $max['height'], $max['width'], $size, $min );
  56. $img = array(
  57. 'height' => $output['short'],
  58. 'width' => $output['long']
  59. );
  60. // portrait
  61. } else if ( $logo['width'] < $logo['height'] ) {
  62. $output = logo_awesomeness_min_max( $logo['width'], $logo['height'], $max['width'], $max['height'], $size, $min );
  63. $img = array(
  64. 'height' => $output['long'],
  65. 'width' => $output['short']
  66. );
  67. }
  68. // add the CSS
  69. $css = '
  70. <style>
  71. .custom-logo {
  72. height: ' . $img['height'] . 'px;
  73. max-height: ' . $max['height'] . 'px;
  74. max-width: ' . $max['width'] . 'px;
  75. width: ' . $img['width'] . 'px;
  76. }
  77. </style>';
  78. $html = $css . $html;
  79. }
  80. return $html;
  81. }
  82. add_filter( 'get_custom_logo', 'logo_awesomeness_customize_logo_resize' );
  83. /* Helper function to determine the max size of the logo */
  84. function logo_awesomeness_min_max( $short, $long, $short_max, $long_max, $percent, $min ){
  85. $ratio = ( $long / $short );
  86. $max['long'] = ( $long_max >= $long ) ? $long : $long_max;
  87. $max['short'] = ( $short_max >= ( $max['long'] / $ratio ) ) ? floor( $max['long'] / $ratio ) : $short_max;
  88. $ppp = ( $max['short'] - $min ) / 100;
  89. $size['short'] = round( $min + ( $percent * $ppp ) );
  90. $size['long'] = round( $size['short'] / ( $short / $long ) );
  91. return $size;
  92. }
  93. /**
  94. * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
  95. */
  96. function logo_awesomeness_customize_preview_js() {
  97. wp_enqueue_script( 'logo-awesomeness-customizer', get_template_directory_uri() . '/assets/js/logo/customize-preview.js', array( 'jquery', 'customize-preview' ), '201709081119', true );
  98. }
  99. add_action( 'customize_preview_init', 'logo_awesomeness_customize_preview_js' );
  100. /**
  101. * JS handlers for Customizer Controls
  102. */
  103. function logo_awesomeness_customize_controls_js() {
  104. wp_enqueue_script( 'logo-awesomeness-customizer-controls', get_template_directory_uri() . '/assets/js/logo/customize-controls.js', array( 'jquery', 'customize-controls' ), '20171020', true );
  105. }
  106. add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_controls_js' );
  107. /**
  108. * Adds CSS to the Customizer controls.
  109. */
  110. function logo_awesomeness_customize_css() {
  111. wp_add_inline_style( 'customize-controls', '#customize-control-logo_size input[type=range] { width: 100%; }' );
  112. }
  113. add_action( 'customize_controls_enqueue_scripts', 'logo_awesomeness_customize_css' );
  114. /**
  115. * Testing function to remove logo_size theme mod
  116. */
  117. function logo_awesomeness_remove_theme_mod() {
  118. if ( isset( $_GET['remove_logo_size'] ) && 'true' == $_GET['remove_logo_size'] ){
  119. set_theme_mod( 'logo_size', '' );
  120. }
  121. }
  122. add_action( 'wp_loaded', 'logo_awesomeness_remove_theme_mod' );