WordPress image path in js file

Question

I'm creating WP Theme, I'm using slick slider and for nextArrow, prevArrow in main.js file, can't take image url path.

 prevArrow: '<img class="a-left control-c prev slick-prev" src="img/left-arrow.png">',
 nextArrow: '<img class="a-left control-c prev slick-prev" src="img/right-arrow.png">',

Also i have created one var in js

var templateUrl = '<?= get_bloginfo("template_url"); ?>';

and then, I have called this variable in this form:

prevArrow: '<img class="a-left control-c prev slick-prev" src="' + templateUrl + '/img/left-arrow.png">',

but did not work

Kareem Essawy · Accepted Answer · 2018-01-22 11:05:15Z

2

You could avoid hardcoding the full path by setting a JS variable in the header of your template, before wp_head() is called, holding the template URL. Like:

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo("template_url"); ?>';
</script>

And use that variable for example to set the background (I realize you know how to do this, I only include these details in case it helps others):

Reset.style.background = " url('"+templateUrl+"/images/searchfield_clear.png') ";

answered Jan 22, 2018 at 11:05

Kareem Essawy

6251 gold badge6 silver badges16 bronze badges

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

Comments

Kresimir Pendic · Accepted Answer · 2018-01-22 11:03:22Z

1

use something like this in your template:

var templateUrl = '<?= get_template_directory_uri(); ?>';

that will get you full url to theme directory, and then add your subdirectory "/img/.."

answered Jan 22, 2018 at 11:03

Kresimir Pendic

3,6471 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

WordPress image path in js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related