I am facing some typical issue in loading image files in PHP. Image got successfully loaded but cannot get displayed properly.
I have declared a define value, then echoed it in an img tag src attribute :
define('image_site_url','localhost/projects/faantush/product_images/');
<img src="<?php echo image_site_url.$row['image1'] ?>" />
The image file is not found but it is there in product_images. Here are the pictures:
In the HTML code: You are missing the: http:// before localhost
<img src="http://localhost/ ...
If your pictures are hosted on the same server than your website, you don't really need to use an absolute path. You could use a relative path and remove the domain name (localhost in this case):
<img src="/projects/path/to/your/picture.jpg" />
You must use absolute paths when linking to another website, but you can also use absolute paths within your own website. This practice is generally frowned upon, though. Relative links make it easy to do things like change your domain name without having to go through all your HTML pages, hunting down links and changing the names. As an added bonus, they force you to keep your site structure neat and organized, which is always a good idea.
An interesting use case of not using absolute paths is, if you want to set your website to SSL/TLS: you will have to change all the occurrences of http to https. Although it is not a big deal, this is generally not the kind of work you want to do.
See Relative path or url for html src and href attributes and the post from where this quote is taken.
Related
I have my web page set up right. I am just starting to build a PHP section that will allow some CMS functions. The structure of my workspace is:
/workspace/website/index.html
/workspace/website/images
/workspace/website/admin/user_login.php
Now my index.html draws all of the images correctly. However my user_login.php does not. I have HTML wrapped around the PHP scripts with this link
<img src="images/banner.png" height="100px" align="left" />
When I put the user_login.php in the root directory everything shows up fine, but when I put it in the folder for my admin section none of the HTML stuff shows up.
What am I missing? Is this just really bad form for building a CMS section? I am trying to compartmentalize it as much as I can for organizational purposes but this is my first PHP/HTML work so I'm not too familiar with proper "form".
All you need to do is change your image references to be absolute links, by adding an initial slash to the path:
<img src="/images/banner.png" height="100px" align="left" />
at the moment you have relative paths, so the browser is looking for the image at /admin/images/banner.png which obviously doesn't work.
This is a good habit to get into for any in-site links or references.
Prepend / to your assets URL's to load them from the root, If you don't do so the browser tries to look for admin/images/banner.png.
Example:
<img src="/images/banner.png" height="100px" align="left" />
Relative paths are relative to your current location. It is not just your images that will break, but any links or imports that use relative links.
When you are in admin/user_login.php, in other words, the browser is looking for
<img src="admin/images/banner.png" />
You can get around this problem by setting up root relative links, i.e. paths that are based on the web root of the site.
<img src="/images/banner.png" />
I'm having problems with the paths to my first wordpress theme. Post images and stuff not related to css is located in wordpress_folder/blog-images/ and in index.php when I link to images I use this path: blog-images/img.jpg
The problem is now that when I want to link to the same image from another file (not index.php) in this case single.php wich displays one blog post, the correct path is now ../../../blog-images/img.jpg
This is causing problems in the includes like sidebar etc. sidebar.php works fine when called from index.php but the images path is changed if sidebar.php is called from single.php.
Does anyone know what's going on?
If you are creating these links from within php scripts, I would suggest using the site_url() function to get the URL for your wordpress install and then appending your images path to the end of that. If you are editing static theme files like css, then you should use /wordpress_folder/blog_images/img.jpg.
Something like <img src="<?php echo site_url() ?>/blog_images/img.jpg" /> should be sufficient from theme files.
The reason that paths are chaning is because if you are in wordpress_folder then the path blog_images/img.jpg resolves to wordpress_folder/blog_images/img.jpg but if you are on a post that has the url yoursite.com/wordpress_folder/2011/09/category/my_great_post then the path would resolve to wordpress_folder/2011/09/category/blog_images/img.jpg which is obviously incorrect.
For this reason you should try to use the absolute path or full URL so that no matter what file/folder/url you are linking from, the path will always be correct.
The main downside you may run into is that if you were to change the name of your wordpress folder, or remove it altogether, then you may need to make a lot of edits to reflect that. But in any case, you should put the / in front of your path so that it can be referenced the same from everywhere.
Also check out the site_url() reference page, it lists some other helpful functions at the bottom that may be useful to you.
I thought this was a little unclear from drew's answer, so I am adding a little bit more in a separate answer. His advice is sound and I agree with him.
If you prepend a url with a / then it will navigate based on your site url. Without the slash it uses relative navigation.
So here are some examples for www.mydomain.com
//always shows the image located at http://www.mydomain.com/myfolder/pic.png
//no matter what the url is
<img src="/myfolder/pic.png" />
//shows the image located relative to the current path
//if current url is http://www.mydomain.com/posts/ then the image will come from
//http://www.mydomain.com/posts/myfolder/pic.png
<img src="myfolder/pic.png" />
If you are creating links dynamically from php side then you will want to use site_url().
If you are creating links to your theme directory folder then you will want to use bloginfo('template_directory')
I have a php file that loads an article from a db based on the given variables. There is also an .htacces file in the root of the site. I used this in the htaccess to redirect
RewriteRule
^articles/([a-zA-Z0-9-_\s]+).html$
template/index.php?action=viewarticle&alias=$1
after redirecting, the page shows fine but the html in the page goes wrong, for example:
media/2011/02/21/logos.jpg turns in to articles/media/2011/02/21/logos.jpg
This happens because the htacces is redirecting. Is there anyway to do this redirect while keeping the root dir unchanged?
This happens coz the htacces is redirecting.
No, this happens because the browser thinks that
example.com/articles/my_article.html
is a resource in the /articles sub-directory, and treats all relative URLs as relative to /articles.
There is no way to change that behaviour.
You will need to start using absolute image references, or relative image references that consider the additional directory:
<img src="/media/2011/02/21/logos.jpg"> <------ recommended
<img src="../media/2011/02/21/logos.jpg">
you could also use <base> as suggested by #Boris but absolute paths (or full URLs) are a vastly cleaner solution to the problem in my opinion.
First, what do you mean by "html in the pages goes wrong":
Is it the link showed in the status bar?
Is it the actual href? If it is, you probably use some view helper which construct your "base url"
Maybe you "link" your resource without specifing an absolute path (using /), then your resource are "relatively" linked to current page (/articles/)
.htaccess don't change anything in your code.
There is an html element which allow you to define base url used everywhere in your page.
<base href="/root" />
if you have for example Article 12 then when clicking on the link, you will redirect to /root/articles/12
Also, mixing Pekka's answer with Boris', you should define somewhere in your application which is the root path of your application and output all paths as absolute, prepending the base dir you defined earlier.
for example: in config.inc.php
define("ROOT_URI", "http://myserver.com/myapp");
everywhere:
<img src="<?php echo ROOT_URI;?>/media/2011/02/21/logos.jpg
This is like using the base element as Boris suggested, without using it (I also dislike base), and makes your application able to work in whatever folder under the webserver it is stored.
I haven't found a clear answer to this question (but have determined the HTML tag is more trouble than it's worth.)
When you're working with multiple directories on a website, how do you make sure relative links to the rest of your site work as you change your current directory? I don't want my link to "/index.php" to actually link to "/support/index.php" when I go to the support directory.
We're using PHP, so I could use output buffering to change links, but I want to see if others have any good ideas. Could also implement it through Smarty in one way or another. I haven't built a website from scratch that has used multiple directories simply because I don't know of an easy way to deal with this, but the problem shouldn't be too difficult.
(Running on IIS, but obviously it would be better to let it work on any server.)
you could declare a base_url variable, or declare a constant containing your base url
e.g.
DEFINE('BASE_URL', 'http://example.com/');
when using links
e.g.
Home
You already have everything you need
how do you make sure relative links to the rest of your site work as you change your current directory?
we're using absolute links for that
I don't want my link to "/index.php" to actually link to "/support/index.php" when I go to the support directory.
Lucky you, it will never happen
/index.php is absolute path and will never point anywhere beside /index.php.
/ is not just for decoration. It the meaning of slash at the beginning of the path is "root directory". So, /index.php means index.php placed in the root directory.
/support/index.php means index.php placed in the support directory which is placed in the root
easy-peasy. just always use absolute path (not URL which is senseless)
I store a “base” URI in two locations: (i) on the PHP/Zend Framework server, my configuration.xml file holds conventional values such as URIs; (ii) on the client side a more shallow, hidden <form/> holds other (less security compromising) values such as a base URI.
The form, by the way, looks something like this:
<form id="AppSettings" action="#">
<input type="hidden" id="MyBaseUri" value="http://superuser.com"/>
</form>
Add <base href="http://www.domain.com/"> to your <head> tag. This will make all relative links start from the directory given as href. Then use relative links like support/index.php not beginning with/ (i.e. not /support/index.php)
Note: Make the <base> tag the first tag in your <head> section, as all links after that will be interpreted from that base dir. (e.g. <link href="relative/path"> will already use the base dir if it is defined above.
Advantage: you can move your whole page to a subdirectory like http://www.domain.com/page and only have to change the <base> tag. If you use links like /support/index.php they will always start from the root directory (i.e. http://www.domain.com/)
Dynamic base dir for url rewrites:
<?php
if (preg_match("/https/i",$_SERVER["SERVER_PROTOCOL"]))
$protocol = "https";
else
$protocol = "http";
echo '<base href="'.$protocol.'://'.$_SERVER["HTTP_HOST"].dirname($_SERVER["SCRIPT_NAME"]).'/">';
?>
I'm developing a PHP website that uses url routing. I'd like the site to be directory independent, so that it could be moved from http://site.example.com/ to http://example.com/site/ without having to change every path in the HTML. The problem comes up when I'm linking to files which are not subject to routing, like css files, images and so on.
For example, let's assume that the view for the action index of the controller welcome contains the image img/banner.jpg. If the page is requested with the url http://site.example.com/welcome, the browser will request the image as http://site.example.com/img/banner.jpg, which is perfectly fine. But if the page is requested with the url http://site.example.com/welcome/index, the browser will think that welcome is a directory and will try to fetch the image as http://site.example.com/welcome/img/banner.jpg, which is obviously wrong.
I've already considered some options, but they all seem imperfect to me:
Use url rewriting to redirect requests from (*.css|*.js|...) or (css/*|js/*|...) to the right path.
Problems: Every extension would have to be named in the rewrite rules. If someone would add a new filetype (e.g. an mp3 file), it wouldn't be rewritten.
Prepend the base path to each relative path with a php function. For example:
<img src="<?php echo url::base(); ?>img/banner.jpg" />
Problems: Looks messy; css- and js-files containing paths would have to be processed by PHP.
So, how do you keep a website directory independent? Is there a better/cleaner way than the ones I came up with?
You could put in the head
<base href="<?php echo url::base(); ?>" />
This will mean the browser will request any non-absolute URLs relative to that path. However I am not sure how this would affect URLs embedded in CSS files etc. This does not affect paths defined in CSS files. (thanks mooware)
The <base> thing will work but you need to remember it's going to affect your <a> tags too. Consider this example.:
<!-- this page is http://oursite.com/index.html -->
<html>
<head>
<base href="http://static.oursite.com/" />
</head>
<body>
<img src="logo.gif" alt="this is http://static.oursite.com/logo.gif" />
this links to http://static.oursite.com/login which is not what we wanted. we wanted http://oursite.com/login
</body>
</html>
If you use a PHP function call for creating your links, that won't be a problem as you can just make sure it spits out absolute URL. But if you (or your designers) hand-code the <a> tags then you're stuck with the same problem again, just now with <a> instead of <img>.
EDIT: I should add the above paragraph is assuming you serve images from a different host name like we do. If you don't then obviously that won't be a problem.
tomhaigh has a good point, and would be worthwhile to investigate it further.
According to MSDN, the base tag works for all external sources, including style sheets, images, etc.
Perhaps I'm missing something, but can't you just do what I (and I thought everybody else) do/es? Namely put all your images, css, javascripts, etc in a common directory i.e.:
/inc/images/
/inc/css/
/inc/javascript/
etc
And then reference them with base-relative URLs, i.e.:
<img src="/inc/images/foo.jpg" />
etc
?