I want different post-thumbnail size depending on media size

Question

I've got the following code on my home page

<?php echo '<img class="img-responsive" src="',
      wp_get_attachment_image_src( get_post_thumbnail_id(), 'Large' )[0], '">'; ?>

The large size in this case is 1920x245. This works fine in a browser but when the image scales down on smaller screens it's too thin for my taste. I would like to use an image with a different aspect ratio in that scenario.

How do I adjust the above php code to be responsive to media size?

Answer 1

You can use the function [wp_calculate_image_srcset()][1], a helper function to return the srcset attribute value for an image ID, the different sizes need to exist, otherwise the function return false.

Here is what a link with srcset look like,

<img class="alignnone size-full wp-image-122491 "
src="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg" alt="C0101-012" width="2000" height="1200"
srcset="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg 2000w, http://example.com/wp-content/uploads/2016/03/C0101-012-656x394.jpg 656w, http://example.com/wp-content/uploads/2016/03/C0101-012-1024x614.jpg 1024w, http://example.com/wp-content/uploads/2016/03/C0101-012-1080x648.jpg 1080w"
sizes="(max-width: 2000px) 100vw, 2000px" />

With srcset, the browser does the work of figuring out which image is best. On browsers without srcset support, the value of the src attribute will be used as the image src default image (major browser support srcset).

Here is a little example, I needed to add randomize a large section image and generate the new attribute for this image. Media come from a generic array, I simplify all in one function,

function enqueue_front_page_srcset_js(){

    $random_array = array('id'=>'1234', 'url'=>'http://example.com/wp-content/uploads/2016/03/C0948b-162.jpg', ...);

    $random_key = array_rand($images_array, 1);
    $random_image = $images_array[$random_key];

    $size_array = array(array(656, 394), array(1024, 614),array(1080, 648));
    $image_src = $random_image['url'];
    $image_meta = wp_get_attachment_metadata( $random_image['id'] );

    $img_srcset = wp_calculate_image_srcset( 
                   $size_array, 
                   $image_src, 
                   $image_meta, 
                   $random_image['id'] 
    );


    wp_register_script( 'brozzme-random-image',  get_stylesheet_directory_uri() . '/js/jquery.b7e.random.image.js', array( 'jquery' ), false, true );
    wp_localize_script(
        'b7e-random-image',
        'randomImage',
        array(
            'newSrc'=> $image_src,
            'randomSrcset'=> $img_srcset
        )
    );

    wp_enqueue_script('b7e-random-image');
}

add_action('wp_enqueue_scripts', 'enqueue_front_page_srcset_js');

The jQuery script

jQuery(document).ready(function ($) {

    var newSrc = randomImage.newSrc;
    var newSrcset = randomImage.randomSrcset;

    $( ".et_pb_fullwidth_image_0 img" ).attr( "src", newSrc );
    $( ".et_pb_fullwidth_image_0 img" ).attr( "srcset", newSrcset );
});

Hope it helps!

Answer 2

As so often happens (with my questions anyway!) the answer is simple. I added a min-height parameter of 85 pixels to the styling for the image and it crops the image once it gets to that height. Exactly the behavior I wanted.

.img-responsive{
  display:block;  
  max-width: 100%;
  height:auto;
  min-height: 85px;
}