Community Forums › Forums › Archived Forums › Design Tips and Tricks › Change front-page backstretch image for mobile > Digital Pro
Tagged: backstretch, change background image, digital pro, mobile
- This topic has 7 replies, 2 voices, and was last updated 8 years, 1 month ago by Ben Siegfried.
-
AuthorPosts
-
March 17, 2016 at 2:15 pm #181727Ben SiegfriedMember
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.
http://dev.americastributetoparis.comjQuery(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]); } });
March 19, 2016 at 11:22 am #181864ChristophMemberHi,
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]); });
March 19, 2016 at 11:49 am #181865Ben SiegfriedMemberNo 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(){
March 19, 2016 at 12:05 pm #181868Ben SiegfriedMemberI 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 ) ) );
March 19, 2016 at 12:38 pm #181873ChristophMemberHi,
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/A0wsZ9TWCould 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...
March 19, 2016 at 1:25 pm #181876Ben SiegfriedMemberBetween 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.
March 19, 2016 at 8:26 pm #181888Ben SiegfriedMemberOk, 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]); });
March 21, 2016 at 2:06 pm #181992Ben SiegfriedMemberFound 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.