srcset for image header (responsive)

  • richarduk

    (@richarduk)


    10 years, 2 months ago

    Hi, I’m using the media uploader to upload a header image which is output using header_image( ) but I’m not getting the various srcset alternatives for responsive designs. Is there an obvious reason for this?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Madhusudan Pokharel

    (@madhusudan977)

    10 years, 2 months ago

    Hello,
    You will get only one srcset for any image you upload. You have to code yourself for the responsive design like:

    @media only screen and (max-width: 800px) {

    #header{
    width: 100%;
    height: auto;
    background-size: 100% auto !important;
    }
    }

    Thread Starter richarduk

    (@richarduk)

    10 years, 2 months ago

    Gotcha, thanks! I’d come to the conclusion that header_image didn’t output srcset for some reason. Your solution, however, doesn’t replace a header image with different header images depending on viewport, just resizes the existing header.

    I know I’m going to have to dig into wp_get_attachment_image_sizes and wp_get_attachment_image_srcset …

    Oh well …

    Thanks!

    Madhusudan Pokharel

    (@madhusudan977)

    10 years, 2 months ago

    Hello,
    I found this article helpful:
    Article

    Thread Starter richarduk

    (@richarduk)

    10 years, 2 months ago

    Thanks!

    Madhusudan Pokharel

    (@madhusudan977)

    10 years, 2 months ago

    Hello Richard,
    Were you able to sort it out for header image ?

    Thread Starter richarduk

    (@richarduk)

    10 years, 2 months ago

    🙂
    I’ve not looked at it.
    It’s something I’ll look at one day but in my case I’m guessing there’s a very simple workaround of inserting the header image into a dummy post, outputting the HTML and then pasting it in to replace the header HTML.
    But if you figure the PHP out paste it here!

    cwiglar

    (@cwiglar)

    9 years, 5 months ago

    Incase anyone still has this problem, I followed this article to get the attachment ID then did this:

    function getCurrHeaderSrcSet() {
    $data = get_theme_mod('header_image_data');
    $data = get_object_vars($data);

    $attachment_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
    $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );

    return $img_srcset;
};
add_filter( 'currHeaderSrcSet', 'getCurrHeaderSrcSet' );

    Then in the template you can do srcset="<?php echo apply_filters( 'currHeaderSrcSet', '' ); ?>"

    • This reply was modified 9 years, 5 months ago by cwiglar.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘srcset for image header (responsive)’ is closed to new replies.

Tags