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?

Improve this question
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
    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
    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.com/help/on-topic
    – Brad Dalton
    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 Pille
    Sep 4, 2014 at 6:20
  • Well, having written one: It's mostly JS, but it does depend on WP core functions...
    – Johannes Pille
    Sep 4, 2014 at 6:39

1 Answer 1

Reset to default
1

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.

Improve this answer
4
  • 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?
    – kabr
    Sep 5, 2014 at 8:25
  • Did you reload the site after resizing?
    – Johannes Pille
    Sep 6, 2014 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
    – kabr
    Sep 7, 2014 at 8:53
  • What does the console say?
    – Tony Djukic
    Apr 12, 2020 at 6:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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