How to use different images at different sizes

[anobjectn]

Sometimes instead of using a different size of the same image across different devices, I want to use a different image. I thought there was a capability for this using this plugin but I see nothing on it now.

Currently I have this requirement because I want to use landscape oriented images on larger screens, but a different image with portrait dimensions on smaller devices.

[aprokopenko]

Hi,

Yes, you're right, it was possible with this plugin. I will ask someone from our team to provide you with the instructions here in thread

[ksamojlenko]

hello @anobjectn, you can read about it on next link https://github.com/justcoded/just-responsive-images/wiki/3.-Template-functions and i give to you example rwd_attachment_image( $featured_image_id, array( 'visual', // main size, which should be rendered; it should have a zero key! 'mobile' => $mobile_image_id, // rewrite a key under 'visual' main size to use another image ), 'picture', array( // Additional attributes. For the detailed information see the next page. 'id' => 'picture-id', 'class' => 'some-class', ) );

[anobjectn]

thanks @ksamojlenko Before you posted that helpful info I did implement an alternate solution that afforded me this flexibility but that uses fixed image sizes in wp - so every time an image is uploaded to media library these sizes are generated which is not ideal I plan to convert this back to RWD.

I can post my alternate version in case someone can use it as its flexible and easier to understand than the RWD documentation (to me, sorry). Im using ACF Pro, and a bunch of images sizes including vertical (portrait) sizes like hero-m-v-lg and horizonal (landscape) images hero-m-v-lg , with seperate landscape sizes for larger "desktop" screens, for two types of areas: a header / hero area background and a couple of modals but I really wanted different images and different aspect ratios.

function responsive_background_css($selector='body',$array_mq_styles=[]) {
    $css = '<style>';
    foreach ($array_mq_styles as $style){
        if(is_string($style)){
            $css .= $selector.'{'.$style.';}';
        } elseif(is_array($style) && count($style)==2){
            $css .= '@media'.$style[0].'{'.$selector.'{'.$style[1].';}}';
        }
    }
    $css .= '</style>';
    return $css;
}

function hero_backgrounds(){
    $largest_mobile_width = '428px';
    $largest_mobile_height = '746px';
    if(is_front_page()):
        $bg_header_home_mobile = get_field('background_homepage_header_mobile', 'option');
        $bg_header_home_desk = get_field( 'background_homepage_header', 'option' );

        $hero_settings = [
            'background-image:url('.$bg_header_home_mobile['sizes']['hero-m-v-sm'].')',
            ['(min-width:376px) and (max-width:'.$largest_mobile_width.') and (max-height:'.$largest_mobile_height.')','background-image:url('.$bg_header_home_mobile['sizes']['hero-m-v-lg'].')'],
            ['(min-width:768px)','background-image:url('.$bg_header_home_desk['sizes']['hero-d-home-sm'].')'],
            ['(min-width:1024px)','background-image:url('.$bg_header_home_desk['sizes']['hero-d-home-md'].')'],
            ['(min-width:1440px)','background-image:url('.$bg_header_home_desk['sizes']['hero-d-home-lg'].')'],
        ];

        echo responsive_background_css('.page-hero',$hero_settings);
    else:
        $bg_header_mobile = get_field('background_page_header_mobile','option');
        $bg_header_desk = get_field( 'background_page_header','option');

        $header_bg_settings = [
            'background-image:url('.$bg_header_mobile['sizes']['hero-m-h-sm'].')',
            ['(min-width:376px) and (max-width:'.$largest_mobile_width.') and (max-height:'.$largest_mobile_height.')','background-image:url('.$bg_header_mobile['sizes']['hero-m-h-lg'].')'],
            ['(min-width:768px)','background-image:url('.$bg_header_desk['sizes']['hero-d-sm'].')'],
            ['(min-width:1024px)','background-image:url('.$bg_header_desk['sizes']['hero-d-md'].')'],
            ['(min-width:1440px)','background-image:url('.$bg_header_desk['sizes']['hero-d-lg'].')'],
        ];
        echo responsive_background_css('.page-hero',$header_bg_settings);
    endif;
}

function modal_backgrounds(){
    $largest_mobile_width = '428px';
    $largest_mobile_height = '746px';
    $background_modal_mobile = get_field( 'background_modal_mobile', 'option' );
    $background_modal = get_field( 'background_modal', 'option' );

    $mobile_target = '.header-nav,.main-modal-container';
    $desk_target = '.main-modal-container';

    $modal_settings_mobile = [
        'background-image:url('.$background_modal_mobile['sizes']['window-cover-v-sm'].')',
        ['(min-width:376px) and (max-width:'.$largest_mobile_width.') and (max-height:'.$largest_mobile_height.')','background-image:url('.$background_modal_mobile['sizes']['window-cover-v-lg'].')'],
    ];
    $modal_settings_desk = [
        ['(min-width:768px)','background-image:url('.$background_modal['sizes']['window-cover-h-sm'].')'],
        ['(min-width:1024px)','background-image:url('.$background_modal['sizes']['window-cover-h-md'].')'],
        ['(min-width:1440px)','background-image:url('.$background_modal['sizes']['window-cover-h-lg'].')'],
    ];
    echo responsive_background_css($mobile_target,$modal_settings_mobile);
    echo responsive_background_css($desk_target,$modal_settings_desk);
}

add_action('wp_head', 'hero_backgrounds', 100);
add_action('wp_head', 'modal_backgrounds', 101);