CODEWITHSUNDEEP
javascriptwordpress
Rexhep Rexhepi
Rexhep Rexhepi

Reputation: 137

WordPress image path in js file

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

Upvotes: 1

Views: 5354

Answers (2)

Kareem Essawy
Kareem Essawy

Reputation: 615

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') ";

Upvotes: 2

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

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/.."

Upvotes: 1

Related Questions