logo-resizer.php 4.4 KB

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