1

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?

  • 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 Sep 2 '14 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. – kbrunner Sep 2 '14 at 14:00
  • Note that we do not handle questions: generic PHP/MySQL/CSS/JavaScript/jQuery/TinyMCE issues and development - try StackOverflow wordpress.stackexchange.com/help/on-topic – Brad Dalton Sep 2 '14 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 Pille Sep 4 '14 at 6:20
  • Well, having written one: It's mostly JS, but it does depend on WP core functions... – Johannes Pille Sep 4 '14 at 6:39
0

If 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.

  • Thanks for your solution, unfortunately it doesn't work yet. I added images sizes add_image_size( 'small', 768 ); add_image_size( 'medium', 1024 ); add_image_size( 'large', 1400 ); and then regenerated the thumbnails, but checking with a resizer tool, backstretch is still using the original image when using a smaller device. Any ideas? – kbrunner Sep 5 '14 at 8:25
  • Did you reload the site after resizing? – Johannes Pille Sep 6 '14 at 21:29
  • Yes, I did. In order to find the problem, I made a jsfiddle in the non-WordPress-mode. Unfortunately, it does not work there, too. Like within WordPress, only "else" is shown. jsfiddle.net/98t21Le8 – kbrunner Sep 7 '14 at 8:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.