I am using backstretch.js to set a featured image as a full size background image (as per this tutorial).
I would like to combine this approach with different thumbnail sizes in order to reduce loading time on mobile devices. I am wondering how I can manage this.
I guess the deciding line of code is the following from functions.php:
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );
I know that I can combine this code with an image size, like
wp_get_attachment_url( get_post_thumbnail_id(), 'medium' ) ) );
But I don't know how to combine this either with mediaqueries or an if-query. Do you have an idea?
I am using backstretch.js to set a featured image as a full size background image (as per this tutorial).
I would like to combine this approach with different thumbnail sizes in order to reduce loading time on mobile devices. I am wondering how I can manage this.
I guess the deciding line of code is the following from functions.php:
wp_localize_script( 'backstretch-set', 'BackStretchImg', array( 'src' => wp_get_attachment_url( get_post_thumbnail_id() ) ) );
I know that I can combine this code with an image size, like
wp_get_attachment_url( get_post_thumbnail_id(), 'medium' ) ) );
But I don't know how to combine this either with mediaqueries or an if-query. Do you have an idea?
Share Improve this question edited Sep 4, 2014 at 6:14 Johannes P. 11.1k3 gold badges42 silver badges53 bronze badges asked Sep 2, 2014 at 7:44 kabrkabr 3411 gold badge3 silver badges10 bronze badges 5- Unfortunately, theme customization is off topic here unless it relates to the default themes. Please ask this question on your themes support forums. Thanks – Brad Dalton Commented Sep 2, 2014 at 13:10
- 2 Why is this offtopic? Imho it is not a theme-specific question, but a question that can arise with every theme – and therefore the solution could be used with every theme. – kabr Commented Sep 2, 2014 at 14:00
- Note that we do not handle questions: generic PHP/MySQL/CSS/JavaScript/jQuery/TinyMCE issues and development - try StackOverflow wordpress.stackexchange/help/on-topic – Brad Dalton Commented Sep 2, 2014 at 14:49
- Granted this is a borderline case, but I am not going to close vote yet. The solution will most likely not depend on WP as an evironment, but it might. – Johannes P. Commented Sep 4, 2014 at 6:20
- Well, having written one: It's mostly JS, but it does depend on WP core functions... – Johannes P. Commented Sep 4, 2014 at 6:39
1 Answer
Reset to default 1If you were to use mediaqueries, you'd have to selectively dis- and enable DOM elements to which you have applied different images.
Rather than that, I'd recommend conditionally applying different images to the same element, i.e. the <body> and keeping the condition inside the JS.
wp_localize_script is capable of passing several parameters to the script. I'd say pass several image sizes like so:
$script_parameters = array(
'small' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(150, 150)),
'medium' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(250, 250)),
'large' => wp_get_attachment_image_src( get_post_thumbnail_id(), array(350, 350))
);
wp_localize_script(
'backstretch-set',
'BackStretchImages',
$script_parameters
);
And then expand the JS by a condition based on the screen/viewport width:
jQuery(document).ready(function($) {
var viewportWidth = $(window).width();
// same as "document.documentElement.clientWidth" (vanilla JS)
if ( 768 > viewportWidth ) {
$("body").backstretch([BackStretchImages.small[0]],{duration:3000,fade:750});
} else if ( 1024 > viewportWidth ) {
$("body").backstretch([BackStretchImages.medium[0]],{duration:3000,fade:750});
} else {
$("body").backstretch([BackStretchImages.large[0]],{duration:3000,fade:750});
}
});
You can add as many sizes as you wish and adjust the viewport boundaries to your liking.