Title: Image Path in WordPress Javascript File
Last modified: July 25, 2021

---

# Image Path in WordPress Javascript File

 *  [kesking7](https://wordpress.org/support/users/kesking7/)
 * (@kesking7)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/image-path-in-wordpress-javascript-file/)
 * Hello,
 * I’m building a blog website and I would like to give a path to changeable images
   in js. Normally, If I would create a path in PHP It would seem like this.
 * /img/instance.jpg” alt=”instance-picture”>
 * I’ve been searching on how to create a path for images in js with WordPress but
   nothing I came up with.
 *     ```
       document.addEventListener("DOMContentLoaded", () => {
           new Glide(".glide", {
               type: "carousel",
               startAt: 0,
               animationTimingFunc: "ease-in-out",
               gap: 100,
               perView: 3
           }).mount();
   
           let prevBtn = document.getElementById("prev");
           let nextBtn = document.getElementById("next");
   
           let background = document.querySelector(".wallpaper");
           let indices = document.querySelectorAll(".index");
   
           let bgImgs = ["dolmabahce.jpg", "cappadocia.jpg", "cami-1.jpg", "efes.jpg"];
   
           let currentIndex = 0;
   
           indices.forEach(index => index.classList.remove("active"));
           indices[currentIndex].classList.add("active");
   
           var myAnimation = new hoverEffect({
               parent: document.querySelector(".wallpaper"),
               intensity: 0.3,
               imagesRatio: 1080 / 1920,
               image1: <code>/img/${bgImgs[0]}</code>,
               image2: <code>/img/${bgImgs[1]}</code>,
               displacementImage: "img/14.jpg",
               hover: false
           });
   
           var myAnimation2 = new hoverEffect({
               parent: document.querySelector(".wallpaper"),
               intensity: 0.3,
               imagesRatio: 1080 / 1920,
               image1: <code>/img/${bgImgs[1]}</code>,
               image2: <code>/img/${bgImgs[2]}</code>,
               displacementImage: "img/14.jpg",
               hover: false
           });
   
           var myAnimation3 = new hoverEffect({
               parent: document.querySelector(".wallpaper"),
               intensity: 0.3,
               imagesRatio: 1080 / 1920,
               image1: <code>/img/${bgImgs[2]}</code>,
               image2: <code>/img/${bgImgs[3]}</code>,
               displacementImage: "img/14.jpg",
               hover: false
           });
   
           var myAnimation4 = new hoverEffect({
               parent: document.querySelector(".wallpaper"),
               intensity: 0.3,
               imagesRatio: 1080 / 1920,
               image1: <code>/img/${bgImgs[3]}</code>,
               image2: <code>/img/${bgImgs[0]}</code>,
               displacementImage: "img/14.jpg",
               hover: false
           });
   
           let distortAnimations = [
               myAnimation,
               myAnimation2,
               myAnimation3,
               myAnimation4
           ];
   
           function startNextDistortAnimation() {
               let prevIndex = currentIndex;
               currentIndex = (currentIndex + 1) % 4;
               indices.forEach(index => index.classList.remove("active"));
               indices[currentIndex].classList.add("active");
               distortAnimations[prevIndex].next();
               showTextAnimation("next");
               setTimeout(() => {
                   let canvas = background.querySelectorAll("canvas");
                   background.appendChild(canvas[0]);
                   distortAnimations[prevIndex].previous();
               }, 1200);
           }
   
           function startPrevDistortAnimation() {
               currentIndex = currentIndex - 1 < 0 ? 3 : currentIndex - 1;
               indices.forEach(index => index.classList.remove("active"));
               indices[currentIndex].classList.add("active");
               distortAnimations[currentIndex].next();
               showTextAnimation("prev");
               setTimeout(() => {
                   let canvas = background.querySelectorAll("canvas");
                   background.insertBefore(canvas[canvas.length - 1], background.firstChild);
                   distortAnimations[currentIndex].previous();
               }, 500);
           }
   
           nextBtn.addEventListener("click", () => {
               startNextDistortAnimation();
           });
   
           prevBtn.addEventListener("click", () => {
               startPrevDistortAnimation();
           });
   
       });
       ```
   
 * However, my path looks like this. “[http://bacasizsanayi.localhost/blog/img/instance.jpg&#8221](http://bacasizsanayi.localhost/blog/img/instance.jpg&#8221);
 * As I think, It should look like this.
    [http://bacasizsanayi.localhost/wp-content/themes/bacasizsanayi/img/ill.jpg&#8221](http://bacasizsanayi.localhost/wp-content/themes/bacasizsanayi/img/ill.jpg&#8221);
 * I would appreciate anybody tells me how to create a path in WordPress javascript
   files.
 * Thanks in advance,

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [kesking7](https://wordpress.org/support/users/kesking7/)
 * (@kesking7)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/image-path-in-wordpress-javascript-file/#post-14699174)
 * Third paragraph; “<?php echo get_template_directory_uri(); ?>/img/instance.jpg”*
 * This is how normally we add images in PHP, but I would like to do it in JS.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [4 years, 9 months ago](https://wordpress.org/support/topic/image-path-in-wordpress-javascript-file/#post-14702526)
 * JS knows nothing of server paths since it runs client side. You of course could
   hardcode a path. But then it’s only sure to work on your specific server. Other
   WP installations could use a different folder structure. To be fully portable,
   your JS code needs to know what is returned by PHP’s `get_template_directory_url()`
   and similar. To pass values from PHP to your JS, use `wp_localize_script()`
    
   [https://developer.wordpress.org/reference/functions/wp_localize_script/](https://developer.wordpress.org/reference/functions/wp_localize_script/)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Image Path in WordPress Javascript File’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 2 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [4 years, 9 months ago](https://wordpress.org/support/topic/image-path-in-wordpress-javascript-file/#post-14702526)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics