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.
Related
I am a newbie in website development.
here is my problem :
I have 2 HTML files. they are 'index.php' and 'header.php' . I try to include 'header.php' in to the 'index.php' using this code :
'index.php'
<body>
<?php
include("header/header.php");
?>
</body>
'header.php' contain this code :
<h1>Its header</h1>
<img src="img/006-tumblr.png" width="200" height="200">
its the folder hirearchy :
-index.php
--header
--img
-006-tumblr.png
-header.php
When I open 'index.php' , 'header.php' is included but the image is not displaying.
So how can I include 'header.php' with the image?
A good way of proceeding would be to have a folder "img" in your root public HTML path containing all images, eventually with subfolders to separate them. The reason for that is that your main controller is launching from root. In that way, wherever you call your image file, you just have to go to img/ in order to find it. The same logic applies to all media. So, if you intend to have video for example, you could have a main folder media with a img subfolder and a vid subfolder. This type of logic has to be defined at start of project so that you don't have to refactor in the middle of it.
The logic of including a file into another is different from linking a CSS file. When you include a PHP file, the entire code is added to the source file and then the server compiles the codes. So the image files and other resources should be addressed relative to the source document (not the included one). This logic is different in a CSS file and the resource files e.g. a background image is complied relative to the CSS file (Because a CSS may be used in different files hirearchy). So this will work:
<h1>Its header</h1>
<img src="header/img/006-tumblr.png" width="200" height="200"
Footnote: If you want to use header in different files with different hirearchy the solution for the question above is to set BASEURL for your document and setting the resource and anchores relative to the baseurl.
Giving location from root directory makes image accessible from any location.
<?php define('WEBSITE_BASE', $_SERVER["SERVER_NAME"]); ?>
<img src="<?=WEBSITE_BASE?>/header/img/006-tumblr.png" width="200" height="200">
Best linking policy you should always follow to link static assets to your page so that it links wherever the item is used.
I'm developing a website for my conclusion work at school. I'm using XAMPP v3.2.1. to localhost the site.
My site's folder's are configured just like this in htdocs folder:
ibnm
css
js
img
...
site
about
midia
...
includes.php
index.php (HOME PAGE)
My problem starts here: on index.php I'm including includes.php, that's a simple file with define() functions to the folders of my site so I can print the constant on the HTML tags of the site as URL (just like below)
//includes.php
<?php
define("css", "localhost/ibnm/css");
?>
//index.php
<?php
include_once("includes.php");
?>
<link href="<?= css; ?>/bootstrap.css" rel="stylesheet">
But when I do this, the CSS don't function. When I see an <a> tag with the previously defined URL on page it looks like
localhost/ibnm/site/localhost/ibnm/css
instead of
localhost/ibnm/css
It's confunsing 'cause if the <a> tag doesn't have any value (href="") it output localhost/ibnm/site/.
What can be wrong? XAMPP or coding?
Any url is not starts with http then browser will assume that its relative path so it will append to your current path, thats why your getting localhost/ibnm/site/localhost/ibnm/css.
And one small correction in your code, its not good idea to hard code server name in the code, better to get server name dynamically. So that you no need to change while deploying your site in real server.
//includes.php
<?php
define("css", $host='http://'.$_SERVER['SERVER_NAME'].'/ibnm/css');
?>
This is because the browser think localhost is a folder, and then do this ontop of the current path, to fix is just add http:// before the localhost
define("css", "http://localhost/ibnm/css");
Instead of using absolute path you can just add one slash before CSS path -
<link href="/<?= css; ?>/bootstrap.css" rel="stylesheet">
I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?
./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.
Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.
Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.
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 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
?