Change front-page backstretch image for mobile > Digital Pro

[Ben Siegfried]

I'm trying to change the Backstretch image on .front-page-1 at screenwidth of 800px.

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 ) ) );

			}

		}

Here's the jquery for the backstretch from backstretch-set . js:

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

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

});

And here's what I've tried from this tutorial, but it won't work. I don't know enough about PHP to know if I should be doing something in the enqueing of the backstretch javascript. It's based off this tutorial: https://stackoverflow.com/questions/29729678/serving-a-different-set-of-images-for-mobile

The filepath to the image I want to swap in at 800px is in the images directory.

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]);

}

});

http://dev.americastributetoparis.com

[Christoph]

Hi,

there are a few options.

This will change the image when the window is resized:

jQuery(document).ready(function($) {
$(window).on('resize', function(){
    var screen = $(this);
    if (screen.width() < 800) {
    (".front-page-1").backstretch(["/images/americas-tribute-to-paris-mobile.png"]);
    } else{
     //tab or desktop
    $(".front-page-1").backstretch([BackStretchImg.src]);
    }
});
});

This will change the image depending on the screen size when the site is loaded
(you'd have to reload the site with a different window size to see a different image):

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

//Assign an image to a variable depending on media query
var bgImage = (window.matchMedia("(max-width: 800px)").matches) ? "/images/americas-tribute-to-paris-mobile.png" : BackStretchImg.src;

// Output the image with backstretch
$(".front-page-1").backstretch([bgImage]);
});

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Ben Siegfried]

No matter what I do I can't get the other image, the one in the images directory to even appear. I'm looking at the console and it gives a '404' for that image. The filepath is correct, the name of the image file is correct, the image is different than the one loading for desktop.

Also, I'm not sure how to put together what you're showing me. I hear what you're saying though.

the window on resize function is causing backstretch to lose its ability to stretch to all four sides of the window.

$(window).on('resize', function(){

[Ben Siegfried]

I was told this by Studiopress but I don't know how to write that PHP. This is why I included that part of the front-page.php code block in the initiation of this post:

1. The code that passes on the image information can be seen at line# 48 of file "front-page.php". You can add information about another image the same way.

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

[Christoph]

Hi,

if you are getting a 404, something is not right with the path or file name.

You would replace the code in backstretch-set.js.

The "backstretching" looks good on my laptop.
http://screencast.com/t/A0wsZ9TW

Could you please paste a screenshot of the image not stretching to all four sides?

I somehow doubt that adding an image to the wp_localize_script array and then selecting the right array element in a conditional statement would be any easier...

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Ben Siegfried]

Between the two code blocks you provided, I'm confused as to whether I add one or the other or both?

I didn't even have either of them installed on the dev. site, I was just tooling around on local dev.

Which would you like to see installed?

The image is in the images directory and the name in the code is patent with its name, and it is a png.

Just so you know, the image that should be swapping in is the same one you're seeing except that all of the graphical elements are given opacity so that the html text above it becomes legible. Right now as a temp solution I'm giving an RGBA value to the wrap at 800px screenwidth.

[Ben Siegfried]

Ok, so the reason I wasn't seeing the image at 800px screenwidth was that I didn't add enough image filepath to bring the image in. I currently have it working but you have to refresh the page if you're viewing it on a desktop. You'll notice I removed the RGBA on the wrap for the HTML text.

How would we get it to swap without having to refresh the page? The first code block you said would do that doesn't do that, but the second block works as it is now. Check it out at dev.americastributetoparis.com

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

//Assign an image to a variable depending on media query
var bgImage = (window.matchMedia("(max-width: 800px)").matches) ? "/wp-content/themes/digital-pro/images/americas-tribute-to-paris-mobile.png" : BackStretchImg.src;

// Output the image with backstretch
$(".front-page-1").backstretch([bgImage]);
});

[Ben Siegfried]

Found this and adapted it to my need here: media query not just on run time, but also when any changes to the window state occur

Seen working here: Americastributetoparis.com

[Author]

Posts