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" />
Related
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.
My question might not be clear, so here is an example.
I have a PHP script that will auto add the relative path to all of HTML resources like
CSS - <link href href="<?php echo $siteroot ?>css/main.css" ... >
JS - <script src="<?php echo $siteroot ?>js/main.js"</script>
Images <img src="<?php echo $siteroot ?>img/avatar.jpg" ... >
other uses like PHP includes
the script will auto make the relative path to the site root and this will vary to be '../', '../../', '../../../', or an empty string '' if it is the site root folder - main index
My question does this will affect the cache system the browser uses? I thought of this because the same resource will be different in many pages that are in subfolders!
once ../../img/avatar.jpg other ../img/avatar.jpg, other img/avatar.jpg alone!
I have tried with chrome and run a file with img and then deleting the img and opening a file in a subfolder. This worked and the image was there!
I still not sure and want a granted answer about the caching process for relative paths. If there is any extra information, I will appreciate it :)
Thank you
These resources will be cached once because absolute path is same, regardless they relative paths differ. Browsers uses absolute paths for caching.
I am attempting to integrate a Wordpress blog page into my (php) website. So far I have been successful in creating an installing it into a subdirectory. I can see that this works.
The issue I am facing is that images are not showing (the alt text is). The issue is that Wordpress uses a incorrect path to the flies:
Wrong Path: https://sitename.com/wordpress/blog/images/brand/logo.png
Correct: https://sitename.com/images/brand/logo.png
It should not have /wordpress/blog/in it.
How do I go about resolving this to point at the correct directory without duplicating the files. Note that in the code the path is is written as: /images/brand/logo.png
If your image folder lays inside theme directory, then you can use
<img src="<?php bloginfo('template_url'); ?>/images/brand/logo.png" />
If your image folder lays outside the theme directory, then you may use
<img src="<?php echo home_url(); ?>/images/brand/logo.png" />
Put this in your htaccess in your root directory.
RewriteEngine On
RewriteRule ^wordpress/blog/images/(.*)$ /images/$1 [L]
That should rewrite those urls.
Depending on your needs, you may also want to consider this article. It doesn't sound like your problem is that you want to change all urls, only the urls to your images.
If you already have path as /images/brand/logo.png , just go 2 levels up like this;
../../images/brand/logo.png
If you are using a wordpress default theme/img upload folder then wordpress build in function get_stylesheet_directory() would work for you. In this case no matter where you shift your project it will always grab this path, this much better then hardcoding path every time.
I have the following file structure:
C:/wamp/myproject/admin/webroot/images
I have an index.php file lying inside the admin folder which calls a header.inc.php file lying in the same folder. header.inc.php has the following code-
<td align="left" valign="top" class="header-bg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
index.php calls a css file (css.css) through the following code:
<link href="<?php echo (WS_DIR_CSS); ?>/css.css" rel="stylesheet" type="text/css" />
The css lies in the following location:
C:/wamp/myproject/admin/webroot/css
The css files has a class which has the following code:
.header-bg {
background:url(../images/header_bg.jpg) left top repeat-x;
height:77px;
}
The image header_bg.jpg is not being displayed in the browser. Help anyone?
the image is included relative to the css
if your image lives here...
/images
and your css lives here...
/somefolder/css/style.css
then the rule would be
background-image:url( ../../images/header_bg.jpg );
Can you check the element using firebug? Are there any rewrite rules that may be rerouting the request? Do you have read permissions on the image?
The image header_bg.jpg is not being displayed in the browser.
There are a hundred possible reasons: from your browser set to block images, filesystem permissions denying read-access on the server. Without knowing several more important details, a good start is figuring out if you're browser even tries to get the image. This is where Firebug (via Firefox add-ons), or some other like browser plugin comes in handy.
Look in your server logs to see which files is actually being requested. It's quite likely that you've got your URLs mixed up somewhere along the way.
Relative addressing is not working by design.
That's why one should use absolute address.
Make yourself know what is actual header_bg.jpg address relative to site root.
/images/header_bg.jpg for example.
Use that address.
With or without WS_DIR_CSS helper, but in the HTML code it must be /images/header_bg.jpg or whatever absolute address is.
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
?