Jump to content

Unable to get proper image url?


Godfrey
 Share

Recommended Posts

Hello,

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

A
fter 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? 

Link to comment
Share on other sites

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 ?>"> 
  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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. :rolleyes:

Link to comment
Share on other sites

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. :rolleyes:

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 :D

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";
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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");
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...