Change front-page backstretch image for mobile width > Digital Pro

[Ben Siegfried]

How would I have the front-page backstretch image (that is above the fold) be replaced by a different image at 800px wide?

Let's say we put the background image for mobile in the /images folder.

From the front-page . php file:

//* Enqueue scripts for backstretch
		add_action( 'wp_enqueue_scripts', 'digital_front_page_enqueue_scripts' );
		function digital_front_page_enqueue_scripts() {

			$image = get_option( 'digital-front-image', sprintf( '%s/images/front-page-1.jpg', get_stylesheet_directory_uri() ) );

			//* Load scripts only if custom backstretch image is being used
			if ( ! empty( $image ) && is_active_sidebar( 'front-page-1' ) ) {

				//* Enqueue Backstretch scripts
				wp_enqueue_script( 'digital-backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/backstretch.js', array( 'jquery' ), '1.0.0' );
				wp_enqueue_script( 'digital-backstretch-set', get_bloginfo('stylesheet_directory').'/js/backstretch-set.js' , array( 'jquery', 'digital-backstretch' ), '1.0.0' );

				wp_localize_script( 'digital-backstretch-set', 'BackStretchImg', array( 'src' => str_replace( 'http:', '', $image ) ) );

			}

		}

From the front-page . js file:

jQuery(function( $ ){

	// Set front page 1 height
	var windowHeight = $( window ).height() - 90;

	$( '.front-page-1' ) .css({'height': windowHeight +'px'});
		
	$( window ).resize(function(){
	
		var windowHeight = $( window ).height();
	
		$( '.front-page-1' ) .css({'height': windowHeight +'px'});
	
	});

	// Local Scroll Speed
	$.localScroll({
		duration: 750
	});

});

http://my.studiopress.com/themes/digital/#demo-full

[Ben Siegfried]

Here's the link, the site wasn't live when I made the post. For the time being I have changed opacity on the section .wrap with rgba at mobile size so you can read the text.

Americastributetoparis.com

[Ben Siegfried]

Actually, here's the jquery for the backstretch from backstretch.set . js:

jQuery(document).ready(function($) {

	$(".front-page-1").backstretch([BackStretchImg.src]);

});

I've been trying a few different ways at these pages to no avail.

https://stackoverflow.com/questions/29729678/serving-a-different-set-of-images-for-mobile

http://www.sitepoint.com/switch-background-image-backstretch-js/

[Ben Siegfried]

So I'm trying the if/else statement below and the desktop backstretch image is working but the image set for mobile (800px) is not coming in. The console is giving a 404 (Not Found) for the mobile image.

jQuery(document).ready(function($) {

if (window.matchMedia("(max-width: 800px)").matches) {
// phone
$(".front-page-1").backstretch(["/images/americas-tribute-to-paris-mobile.png"]);

} else {

//tab or desktop
$(".front-page-1").backstretch([BackStretchImg.src]);

}

});

[Author]

Posts