Replace src attribute with javascript – getting a relative path –

Question

I have a 1.5mb .png that I have to use on a site. No choice.

I only need in on a desktop though.

This project in a WordPress project, so It's PHP. My problem is that I can't seem to get a clean relative link path to use in the js and for the various scenarios I have going on between local and live.

PHP

<img src="<?php bloginfo('template_directory'); ?>/images/smaller-version-of-image" alt="yeah">

jQuery

var windowWidth = $(window).width();

if ( windowWidth > 1200 ) {

    $('#flare01 img').attr('src','./images/larger-version-of-image.png');

}

There are a few factors. The local WP install is in the root. The live WP install lives in a subfolder but has it's setting set to the root. - so that is a WordPress specific part. The site points to mysite.com - but the WP is in mysite.com/phoebe

I don't really know why any of that should matter though – between the HTML and js fileMy logic is that my js file is in the js folder js/scripts.js in the root theme. The images are in the imagesfolder – so, pop out of the js, and then into the images ./images/image.png but that doesn't give me the correct path.

Community · Accepted Answer · 2017-05-23 10:27:12Z

2

I think you want to use ".." instead of "." if you want to go one level up in the hierarchy:

$('#flare01 img').attr('src','../images/larger-version-of-image.png');

"." refers to the current working directory.

You might try retrieving the URL of your WP site and store in a variable, to use when constructing your image URLs, something along the lines of this: WordPress path url in js script file

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Apr 23, 2014 at 1:41

aarontam

4411 gold badge3 silver badges12 bronze badges

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

4 Comments

sheriffderek Over a year ago

That takes me to mysite.com/images/images/larger-version-of-image.png which would be great, but unfortunately the image really lives at mysite.com/phoebe/wp-content/themes/theme-name/images/etc...

aarontam Over a year ago

Ah sorry, I missed the finer details of the WP aspect of your implementation. You might try retrieving the URL of your WP site and store in a variable, to use when constructing your image URLs. Something similar to this: stackoverflow.com/questions/5221630/…

sheriffderek Over a year ago

Those are great leads. So far haven't got them to work. I have hope though.

sheriffderek Over a year ago

Got it. I have a messy site with multiple headers and was putting it in the wrong place. Add that link to your answer and I'll mark it solved. Thanks.

Collectives™ on Stack Overflow

Replace src attribute with javascript – getting a relative path –

PHP

jQuery

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

PHP

jQuery

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related