header-image.php 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <div class="custom-header">
  2. <?php
  3. // You can upload a custom header and it'll output in a smaller logo size.
  4. $header_image = get_header_image();
  5. if ( affinity_has_post_thumbnail() && is_single() && affinity_jetpack_featured_image_display() ) {
  6. $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
  7. $thumbnail_attributes = affinity_get_attachment_image_src( $post->ID, $post_thumbnail_id, 'affinity-featured' );
  8. if ( ! empty( $thumbnail_attributes ) ) { ?>
  9. <div class="custom-header-image" style="padding-top: 60%; background-image: url(<?php echo esc_url( $thumbnail_attributes ); ?>);">
  10. </div>
  11. <?php }
  12. } else if ( has_post_thumbnail() && is_singular() && affinity_jetpack_featured_image_display() ) {
  13. $post_thumbnail_id = get_post_thumbnail_id( $post->ID );
  14. $thumbnail_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'affinity-featured' );
  15. if ( ! empty( $thumbnail_attributes ) ) {
  16. //Calculate aspect ratio: h / w * 100%
  17. $ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100; ?>
  18. <div class="custom-header-image" style="padding-top: <?php echo esc_attr( $ratio ); ?>%; background-image: url(<?php echo esc_url( $thumbnail_attributes[0] ); ?>);">
  19. </div>
  20. <?php }
  21. } else if ( ! empty( $header_image ) ) {
  22. $height = get_custom_header()->height;
  23. $width = get_custom_header()->width;
  24. $ratio = $height / $width * 100;
  25. ?>
  26. <div class="custom-header-image" style="padding-top: <?php echo esc_attr( $ratio ); ?>%; background-image: url(<?php echo esc_url( $header_image ); ?>);">
  27. </div>
  28. <?php } // end if ?>
  29. </div><!-- .custom-header -->