Open anobjectn opened 3 years ago
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
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', ) );
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);
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.