[Resolved] Best practice use of elements

[David]

Is it just the sizes of the image that differ ?
I thought your Full image is the one for Retina, and the other would be say the Large Image.
Or are you adding a completely different image as the custom background to the Header Element?

[mkjj]

Ah, ok. Now I get the idea. So, the retina image would be the full size, and the standard full-hd image would be a specific thumbnail size like “my-custom-size”?

[David]

Correct 🙂 Or it could just be one of the default WP sizes.

[mkjj]

That is slick! 🙂

I modified the snippet a little bit. First, I removed the built-in limit of 2560px width. Then I added a thumbnail size of 1920px width and auto height. The third part is your code snippet that I had to change a little bit. This seems to work pretty good:

add_filter( 'big_image_size_threshold', '__return_false' ); 
add_theme_support( 'post-thumbnails' );
add_image_size( 'header-1920', 1920 );
add_action( 'wp_head', function() {
  if( is_page() ) {
    $featured_img_retina = get_the_post_thumbnail_url(get_the_ID(),'full');
    $featured_img_hd = get_the_post_thumbnail_url(get_the_ID(),'header-1920');
    $featured_img_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full" );
    $width = $featured_img_data[1];
    $height = $featured_img_data[2];
    $ratio = $height / $width * 100;
    if ( !empty( $featured_img_retina ) ) {
          echo '
          <style>
          .page-hero {  
              background-image: url(' . $featured_img_hd . ');
              padding-top: ' . $ratio . '%;
          }
          @media (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi),
                  screen and (min-resolution: 2dppx), screen and (min-width: 2000px) {
          .page-hero { background-image: url(' . $featured_img_retina . '); }
          }
          </style>';
      }
  }
});

[David]

Very nice 🙂

[Author]

Posts