HomePage Slider: Set Slide Images for Mobile Devices

In some cases you may need to set a different images for the slider when the slider is being loaded on Mobile Devices (Smartphones and Tablets). Here is a guide how to add additional Customizer option for such images and load them in the slider under Mobile screens:

Note: The below change can be applied only to these Premium Themes from us: tArt, tClub, tCorpo, tGymm, tHomeServices, tKidd, tMeditate, tPsychology, tSpirituality, and tTourism.

1. Navigate to Admin Panel -> Left Menu -> Appearance -> Editor

2. Open theme/inc/customizer.php

Search for this code:

// Add Slide Image
tishonator_customizer_add_image_control( $wp_customize, 'tishonator_slider_settings',
'tishonator_slider_slide'.$slideNumber.'_image', sprintf( __( 'Slide #%s Background Image', 'tishonator' ), $slideNumber ),
array_key_exists('tishonator_slider_slide'.$slideNumber.'_image', $defaultVals) ? $defaultVals['tishonator_slider_slide'.$slideNumber.'_image'] : null );

Then ABOVE it Insert:

// Add Slide Image for Mobile Resolution
tishonator_customizer_add_image_control( $wp_customize, 'tishonator_slider_settings',
'tishonator_slider_slide'.$slideNumber.'_mobileimage', sprintf( __( 'Slide #%s Background Image (Mobile Resolution)', 'tishonator' ), $slideNumber ),
array_key_exists('tishonator_slider_slide'.$slideNumber.'_image', $defaultVals) ? $defaultVals['tishonator_slider_slide'.$slideNumber.'_image'] : null );

3. Open theme/inc/utilities.php Search for this text:

$slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_image', ($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );

Then REPLACE it with:

$slideImage = '';
if ( preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]) ) {

$slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_mobileimage',
				($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );
} else {
    $slideImage = tishonator_read_customizer_option('tishonator_slider_slide'.$i.'_image',
    			($i <= 5) ? get_stylesheet_directory_uri().'/images/slider/slides/'.$i.'.jpg' : '' );
}

4. That’s All.

Now, Navigate to Admin Panel -> Left Menu -> Appearance -> Customize -> Slider Section.

Then Change the image for ‘Slide # Background Image (Mobile Resolution)’:

Note: The above change include server side check if user browser is from Mobile device. So, the Solution will work ONLY if there is NO cache enabled on the site. If you use some caching plugin, you should disable caching of the homepage.