Unable to get proper image url?

[Godfrey]

Hello,

I am following the Basic Website Tutorial 
http://wiki.processwire.com/index.php/Basic_Website_Tutorial

After creating the site settings page and uploading an image to the header_banner img field, the tutorial says to include the path of the image file like so:

 

1. <img src="<?=$pages->get("/site-settings/")->site_header_banner->url ?>">

I changed it to this:

 <img src="<?php echo $pages->get("/site-settings/")->site_header_banner->url ?>"> 

However, they should be the same. But unfortunately my image is not showing up. When I pull the code inspector in Chrome, this is the HTML that I see. 

 

<img src="/site/assets/files/1008/">

When I go into my remote folder and navigate to site>assets>files>1008, I see two files: the original jpg I uploaded (pwtut-header.jpg), and one other one (pwtut-header-1.0x100.jpg). 

What is going on here? Has there been an api change since that tutorial? 

[teppo]

Sounds like your site_header_banner field allows more than one image. That's probably why it's returning directory path instead of image URL -- it doesn't know which image you want to output.

Try altering that field to only allow one image (via field settings) or try doing this instead to get URL for first image in that field:

 <img src="<?php echo $pages->get("/site-settings/")->site_header_banner->eq(0)->url ?>"> 

[Pete]

Or:

<img src="<?php echo $pages->get("/site-settings/")->site_header_banner->first()->url ?>">

Just used first() as an alternative to eq(0), but depends on your preference of course.

[Godfrey]

Huh, a combination of changing the image field "maximum files allowed" from 0 to 1 and using the first()/eq(0) methods worked. Either one of those by themselves didn't work for some reason. Also, when I upload an image, it strangely produces the two files I listed above (it produces the strange pwtut-header-1.0x100.jpg. 

[teppo]

Another file could be a resized version, possibly for admin use (if you've turned on thumbnails in admin for that field.) Naming is a bit off, though -- that "-1" shouldn't imho be there. Someone correct me if I'm wrong, please.

Anyway, you're not using IE10, are you? If you are, this could be somehow related to issue #195.

[Godfrey]

Ah, ok. Yep I did switch on thumbnails.

And nope, I'm using Chrome  

Anyway, glad I got this fixed. Maybe some additional notes should be made to the tut? 
Thanks both for the help!

[gfdesign]

Hi, a silly question. I need to specify an image in a .js file.
This file is and is located in /site/templates/img/top.png
Can somebody tell me which should be the relative root to get this image?

I guess php won't work inside the .js file or am I wrong?
Thanks in advance
Fernando

[Soma]

Why relative and not absolute from root? I have no idea what your js and setup is so I can't tell.

[kongondo]

PHP should work in .js file (url: <?php....?>...but if it is a PHP file that's outside the PW system, most likely you will get a 403 since PW doesn't allow direct access to some folders using your own PHP files.. (if that makes sense )

It's been a long day! See below...

[Soma]

php doesn't work in a .js ...

[kongondo]

I have just realised I was thinking about something else....<script> </script> within a HTML file! Sorry for false info,

[gfdesign]

Why relative and not absolute from root? I have no idea what your js and setup is so I can't tell.

I want it be relative because I wouldn't want change the url once I have to move to online server. (Now, I'm working in a local environment using XAMPP).

This script is to display one button when user arrives the bottom of page, thus can go back to the top when click it. Absolute url could work, but I just wonder if it's possible to do if it's relative in order to avoid extra work.

[Soma]

Yeah but still don't know where you're js lies and so can't say, but it's easy to make a relative path from your js to the image... 

[Soma]

I want it be relative because I wouldn't want change the url once I have to move to online server. (Now, I'm working in a local environment using XAMPP).

This script is to display one button when user arrives the bottom of page, thus can go back to the top when click it. Absolute url could work, but I just wonder if it's possible to do if it's relative in order to avoid extra work.

I develop it so I never have to change it. I never develop in a different structure than on dev and live...

But if you do so and change root directory or have in a subfolder and on live not, you'll have to take care of image paths and link in PW anyway

So one way is to pass the root path you can do so by passing it to js via a script in the header template.

<script>
   var config_root = "<?php echo $config->urls->root ?>;
</script>

then in your .js files you can use

var img = config_root + "site/templates/img/whatever.jpg";

[gfdesign]

Yeah but still don't know where you're js lies and so can't say, but it's easy to make a relative path from your js to the image... 

Sorry, the urls to both files in my PW installation are:

../site/templates/img/top.png (image for the button)

../site/templates/js/scrolltopcontrol.js (script that shows the button)

I'll try your solution and I let you know if it works

Thanks

[Soma]

Without knowing what script you use (custom built or downloaded) you could also add the image directly to the html and hide it. Then use it in you js and make it visible when you need it.

Or you can add a data-url to a DIV tag and read that from the javascript.

<div id="topimage" data-url="<?php echo $config->urls->templates . "img/top.png"></div>

And in your javascript with using jquery

var img = $("#topimage").data("url");

[gfdesign]

Both work. I did not know about data-url method. Very useful

I just wanted to leave the code that worked to me:

<div id="topimage" data-url="<?php echo $config->urls->root ?>site/templates/img/top.png"></div>

Thanks a lot
Fernando