Correct path for images in javascript using Cakephp

Question

I am new in cakephp, and I have a script, which I converted to cakephp. I have there a rotate background that use 4 images like this:

$.backstretch([
    "img/bg/1.jpg",
    "img/bg/2.jpg",
    "img/bg/3.jpg",
    "img/bg/4.jpg"
], {
     fade: 1000,
     duration: 8000
});

When I open script like name_domain.com with use controller users and action login, it see all that images and all work perfect, but when I try to use register (controller=>users, action=>signup) the images are not load. But I put ../img.... then is working here and not in index.

How can I link correctly those images. I also try with "/img" but not working.

Any help will be appreciated.

Priya Bhojani · Accepted Answer · 2014-03-26 06:38:21Z

1

declare a javascript variable in default.ctp

var IMAGE_HOST = "<?php echo $this->webroot.'/img/'; ?>";

and now you can use it in javascript file too

<script>
$.backstretch([
    IMAGE_HOST + "bg/1.jpg",
    IMAGE_HOST + "bg/2.jpg",
    IMAGE_HOST + "bg/3.jpg",
    IMAGE_HOST + "bg/4.jpg"
], {
     fade: 1000,
     duration: 8000
});

hope it helps..!!

answered Mar 26, 2014 at 6:38

Priya Bhojani

1309 bronze badges

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

2 Comments

Stefan C Over a year ago

That is what i this to solve the problem, thank you for your reply:)

Priya Bhojani Over a year ago

Great.. Kindly don't forget to accept post as answer.. Enjoy

Ram Sharma · Accepted Answer · 2014-03-25 13:54:41Z

1

try to use full path something like this.

$this->webroot.'img/myimage.jpg'

OR

$this->Html->url('/img/myimage.jpg')

OR

<?php Router::url('/img/myimage.jpg')?>

edited Mar 25, 2014 at 13:54

answered Mar 25, 2014 at 13:30

Ram Sharma

8,8157 gold badges48 silver badges59 bronze badges

4 Comments

Stefan C Over a year ago

Hey, thanks, but this will not work in javascript file. I need something like that, only that i have to include in a javascript file.

Ram Sharma Over a year ago

you may need to copy js part in .ctp file to make it workable

Ram Sharma Over a year ago

@Essteffan, I have updated my answer you can also try 3rd option as per the above answer. I feel it will solve your issue.

Stefan C Over a year ago

Thank you Ram, i've combine your answoe and Martin's answer and it's working. Best regards

Martin Bean · Accepted Answer · 2014-03-25 14:01:30Z

1

One method is to set a JavaScript variable, and then use that in your subsequent scripts. For example, in your app/Layouts/default.ctp file, you could have:

<script>
    var img_path = "<?php echo Configure::read('App.imageBaseUrl'); ?>";
</script>

And then use it in your scripts like this:

<script>
    $.backstretch([
        img_path + "/bg/1.jpg",
        img_path + "/bg/2.jpg",
        img_path + "/bg/3.jpg",
        img_path + "/bg/4.jpg"
    ], {
         fade: 1000,
         duration: 8000
    });
</script>

answered Mar 25, 2014 at 14:01

Martin Bean

39.6k28 gold badges134 silver badges207 bronze badges

2 Comments

Stefan C Over a year ago

That's a great solution, but i have a small problem. When i am on root (index) is working, but when i'm on /users/signup is add users in link like so: name_domain/users/img/bg/... It's working with Ram solution, like so var img_path = "<?php echo $this->webroot ?>";

Martin Bean Over a year ago

I missed that App.imageBaseUrl only returns a relative URL. You’ll need to combine it with a reference to your site’s base URL. Something like $this->webroot . Configure::read('App.imageBaseUrl').

Moyed Ansari · Accepted Answer · 2014-03-26 07:10:56Z

1

I would recommend to save webroot path in your layout so that its scope remain global

<div id="webroot" class="hide" data-url="<?php echo $this->webroot;?>"></div>

Then use it backstretch js as

 var webroot = $('#webroot').attr('data-url');
    $.backstretch([
        webroot+ "img/bg/1.jpg",
        webroot+ "img/bg/2.jpg",
        webroot+ "img/bg/3.jpg",
        webroot+ img/bg/4.jpg"
        ], {
          fade: 1000,
          duration: 8000
});

When you use different action having same layout with webroot element, it will keep the correct image path.

answered Mar 26, 2014 at 7:10

Moyed Ansari

8,4612 gold badges38 silver badges57 bronze badges

2 Comments

Stefan C Over a year ago

I already did it, but that's another approach, if anyone have the same problem. Thanks you

Moyed Ansari Over a year ago

I was suggesting this because this is more generic approach

Collectives™ on Stack Overflow

Correct path for images in javascript using Cakephp

4 Answers 4

2 Comments

4 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related