0

So sorry if this have been answered - but in that case, I surely do not know what to ask.

Anyway, I have built an image slider which changes the image and the description of the image on click of a button. Point be, I dynamically change the source of the img tag using javascript. But the images do not actually appear on the page.

The code holding the images is a simple array and I just iterate over each one Ie: "images/work1.png", which works offline, but not via php and or wordpress.

This did not work, so I tried putting it in the php function instead: The javascript looks like:

let imgArray = [
        "<?php echo get_theme_file_uri('images/work1.png') ?>",
        "<?php echo get_theme_file_uri('images/work2.png') ?>",
        ... etc
];

So the html looks like : <img src="<?php echo get_theme_file_uri('images/work1') ?>">

The src tag's content is what changes but it does not take effect.

Any knowledge on why neither of those will actually work? The code works because the associated text for each image still changes via click of the button. Just, the image refuses to display.

functions.php looks like this:

function lcc_style_files() {
  wp_enqueue_style('lcc_main_styles', get_stylesheet_uri());
  
}

function lcc_script_files() {
  wp_enqueue_script('main-lcc-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '1.0', true);
}

add_action('wp_enqueue_scripts', 'lcc_style_files');
add_action('wp_enqueue_scripts', 'lcc_script_files');

function lcc_features() {
  add_theme_support('title-tag');
}
add_action('after_setup_theme', 'lcc_features');
4
  • Can you include the code? It's impossible to diagnose what's happening without seeing the code. What does the final HTML look like? And where is the brief code snippet you wrote located?
    – Tom J Nowell
    Mar 24 at 20:01
  • Please edit the code into your question using the edit link, you can't put multi-line code in comments. There is not enough context in your question to understand what is going on, e.g. it's unclear if your JS is in a JS file or a PHP file, a plugin or a theme, etc which is important to know
    – Tom J Nowell
    Mar 24 at 20:12
  • I fixed the formatting of your code addition, but I'm still unclear as to which file let imgArray = [ is in, is it in a javascript file? Or a PHP file?
    – Tom J Nowell
    Mar 24 at 20:22
  • sorry i keep including it but stavkoverflow keeps removing it as soon as i try to send the thing. the array is in a js file. it's part of the code that attempts to change the src value of the img tag. it works offline when wordpress nor php is involved, but it doesn't work this way. again i will mention it works on the text for each image, just not the img src.
    – Ankhi
    Mar 25 at 3:55
1

The problem is that you are trying to use PHP inside a javascript file. PHP only works inside .php files.

If you want to pass information to your javascript file from PHP, use wp_localize_script to store it in a variable, e.g. in a PHP file:

$values = array(
    'foo' => 'bar',
);
wp_localize_script( 'yourscripthandle', 'objectname', $values );
 

Now whenever the yourscripthandle script is enqueued, it will put those values at window.objectname.

You can accesss them like this in javascript:

const values = window.objectname;
console.log( values.foo ); // prints 'bar'

https://developer.wordpress.org/reference/functions/wp_localize_script/

15
  • I dunno, dude. I think I'm too noob to get localize script. I can't translate it to help fix my problem. I don't want to use PHP inside javascript - I simply want to change the src of an img tag to that by putting it in quotes - that should work. And I don't want to pass information from php to javascript either - that's like the opposite of what im trying to achieve. In the Console I get the error: Failed to load resource: the server responded with a status of 404 .
    – Ankhi
    Mar 25 at 19:07
  • You can't put PHP tags inside a javascript file, you need to get the data in PHP filess and print it out to the page for the JS to get. That's what wp_localize_script does. There is no other way to call get_theme_uri() so that your javascript will get the data. The only way to do it using just javascript and only javascript, is to hardcode the full URL into the file
    – Tom J Nowell
    Mar 25 at 21:31
  • Hmmm. Well I am trying the localize script thing. But it is quite complicated. I will after being able to do something simple like alert a message, them have to figure out how to send that all to the page. Definately not easy.
    – Ankhi
    Mar 26 at 18:36
  • Hello Tom J Nowell, so basically I tried for many hours and plenty of research, finally managed to localize the script... but it still gives the exact same result. In the dev tools console it tells me: GET http://localhost:10034/scroll-through-my-work/%3C?php%20echo%20get_theme_file_uri(%27/images/work3.png%27)%20?%3E 404 (Not Found). So the exact same thing as if though I am trying to get my images out of javascript using quoted php tags. I doubted from the start that localize_script was the answer, at least through trying it for hours on end, I really understand it. Still no help though.
    – Ankhi
    Mar 29 at 19:22
  • @Ankhi I can't see the code you wrote that usees wp_localise_script so I can't help until you share what you did and the result, as well as which file you put it in. As an aside, you never shared the full JS file either, so even if somebody wanted to do it all for you, they couldn't
    – Tom J Nowell
    Mar 29 at 19:26
0

PHP: function lcc_script_files() { wp_enqueue_script('main-lcc-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, '2.0', true); wp_localize_script('main-lcc-js', 'php_data', $imgList = array( "img1" => get_theme_file_uri('/images/work1.png'), "img2" => get_theme_file_uri('/images/work2.png') ));}

Js: let theImg = document.querySelector(".theImg"); theImg.src = imgArray.img2;

That will work, all I had to do (and all Tom J Nowell had to tell me) was to remove the quotes and the php tags around the values of the php array.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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