Adding path to image in jQuery code in Wordpress

Question

I'm adding a jQuery script to add a full screen image background to a page via Backstretch (https://github.com/srobbin/jquery-backstretch).

The problem I'm having is getting the path to the images correct, as I'm using Wordpress.

This is what I've got so far:

<script>
    jQuery(document).ready(function($){                    
        $(".primary-container").backstretch(
        "/library/images/image.jpg");               
    });
</script>

I have tried using <?php bloginfo('template_directory') ?> at the start of the url but I believe this doesn't work in jQuery. How do I go about using a url that links to the image in this case?

Thanks.

Wrap it in php and try doing an echo for 'template_directory'? — ayyp
– ayyp, Commented Jun 20, 2013 at 16:59
Assuming the images are in your theme directory, you would need to add '/wp-content/themes/[THEME_NAME]/' to the path. — Derek
– Derek, Commented Jun 20, 2013 at 17:04
Andrew, do you mean "<?php echo get_template_directory_uri(); ?>/library/images/image.jpg"? This doesn't work, but you might be meaning something else? — jasonbradberry
– jasonbradberry, Commented Jun 20, 2013 at 17:05
Why not just place the image in a post, publish the post and inspect the image in your browser's developer tools to get the path? — Delon
– Delon, Commented Jun 20, 2013 at 17:27

Jared Cobb · Accepted Answer · 2013-06-20 18:41:18Z

4

Jason, I believe you're running into a somewhat classic challenge with WordPress and JavaScript assets. You need a PHP variable (or some sort of PHP processing) accessible to your JavaScript, and of course, JavaScript can't parse PHP!

Some of the comments suggest inspecting paths (to simply get your directory as it's been generated) but I'm not a fan of that approach as it assumes your theme path will always be the same. (And this can change if you rename your theme folder, change themes, or simply change your folder structure).

I will typically inject a "helper" script in the <head> of all my themes. It's a very simple JSON object that's name-spaced (to keep the global scope clean).

<script>
// for bootstrapping page level code
var YOURSITENAME = {
    "isFrontPage":<?= (is_front_page() ? 'true' : 'false'); ?>,
    "isPage":<?= (is_page() ? 'true' : 'false'); ?>,
    "postName":'<?= get_post_name(); ?>',
    "templateURI":'<?= get_template_directory_uri(); ?>',
};
</script>

Notice the last item titled "templateURI". In your JavaScript you can now access this value anytime using the namespaced JSON object like so:

var myDirectoryPath = YOURSITENAME.templateURI;

Or in your specific example:

var imagePath = YOURSITENAME.templateURI + "/library/images/image.jpg";

jQuery(document).ready(function($){                    
    $(".primary-container").backstretch(imagePath);               
});

Of course, change YOURSITENAME to some more meaningful namespace for yourself.

Have fun!

edited Jun 20, 2013 at 18:41

answered Jun 20, 2013 at 18:04

Jared Cobb

5,2773 gold badges30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jasonbradberry Over a year ago

Hi Jared, thanks. I've given this a try and it breaks the backstretch plugin, which previously worked apart from the image url. It doesn't seem to accept YOURSITENAME.templateURI + "/library/images/image.jpg" - any ideas?

Jared Cobb Over a year ago

@jasonbradberry Hmm, yea it's possible that we can't chain a string as a parameter call to that backstretch method. I updated the code example. In this newer example I'm building the entire string first (into the imagePath variable) and using that value directly.

Jared Cobb Over a year ago

@jasonbradberry Another thought I just had! Perhaps that plugin doesn't like having the full URL path as a parameter. (i.e. using the http://domain...) I wonder if you should just use a relative path.

jasonbradberry Over a year ago

I think you might be right about relative paths, as the updated code didn't work. I just tried $(".primary-container").backstretch("wp-content/themes/theme/library/images/image.jpg"); and using Chrome inspector I can see that the image is now being found and inserted into the page via jQuery. Unfortunately the image shows in the code but not on the screen so looks like I've got some digging to do as to why!

jasonbradberry Over a year ago

SOLVED! Needed to set height:100% on the parent wrapper of .primary-container, thanks for all your help.

|

Collectives™ on Stack Overflow

Adding path to image in jQuery code in Wordpress

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related