0

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?

2
  • It's not possible to get information about the users screen size in your server side code, on the first request/response. You could work around it by reading the user agent (e.g. iphone) and set the image size string accordingly, but this will be unreliable/messy. Much better will be to send a larger image and 'cut it' (hide) bits of the image with CSS, on larger screens
    – Dan.
    Dec 1, 2016 at 19:48
  • @Dan. that is exactly where my thinking was going. Except rather than send a larger image I would rather clip from the right on smaller screens, thereby changing the aspect ratio. Can you give an example how that is done?
    – marcp
    Dec 1, 2016 at 20:13

2 Answers 2

0

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!

2
  • according to the WordPress documentation for the wp_calculate_image_srcset function it only returns images with the same aspect ratio (see: developer.wordpress.org/reference/functions/…). However I am explicitly trying to change the aspect ratio.
    – marcp
    Dec 2, 2016 at 15:09
  • Yes I noticed the differents aspect ratio, but if you the function you'll see that anytime it will check for the aspect ratio. The add_image_size() function provides images sizes via metadata. I'm not sure, but I think, i would try, just to see, with a little bit of css, maybe.
    – Benoti
    Dec 2, 2016 at 18:15
0

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.