I have a file called "header.php" that I am including on every page on my site and this file contains links to other files on my sever like css files, jquery plugins, etc.. and right now I am using absolute paths for those links so they will work with files that are not in the same directory as the header.php file and this works, but as you can see in the example below, things start to get really hard to manage if you your header.php file contains lot's of links (which mine does) so I would like to know if there are any other alternatives to using absolute paths in the header.php file like I have done here.
header.php
<?
$base_url = "http://example.com";
?>
<html>
<head>
<title> <? echo($title); ?> </title>
<link rel="stylesheet" type="text/css" href="<? echo($base_url); ?>/styles/some_css_file.css" media="all"/>
<link rel="stylesheet" type="text/css" href="<? echo($base_url); ?>styles/another_css_file.css" media="all"/>
<link rel="stylesheet" type="text/css" href="<? echo($base_url); ?>styles/another_css_file.css" media="all"/>
...
...
...
<script type="text/javascript" src="<? echo($base_url); ?>/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<? echo($base_url); ?>/scripts/some_jquery_plugin.js"></script>
<script type="text/javascript" src="<? echo($base_url); ?>/scripts/another_jquery_plugin.js"></script>
...
...
...
</head>
Some file which includes header.php
<?
$title = "some page title";
include("header.php");
?>
<body>
PAGE CONTENTS
</body>
</html>
Use the HTML base tag to define the base of your site.
<base href="<?php echo $base_url; ?>" />
<link rel="style.css" />
Absolute path is the way to go here. But, if you have a lot of links to print, it can be simplified by storing the paths in an array and looping through the array.
$base = "http://www.example.com/"
$links = array( "styles/file1.css", "styles/file2.css", ... );
foreach ( $links as $link ) {
echo '<link rel="stylesheet" href="' . $base . $link . '" type="text/css" media="all" />';
}
As a side note, what you have isn't great practice. It would be better and more efficient for you to try and combine some of those files as this will reduce the amount of HTTP requests the browser has to make to your server. http://developer.yahoo.com/performance/rules.html#num_http
I had the same doubt in one of my projects and i've done as the code bellow. As the paths start with "/", the file will be found based in the root directory and in this case isn't necessary to specify the domain, it will turn the things easier for maintenace and prevent problems if you will do rewrite of URLs using (mod_rewrite). Hope it can help you too!
<html>
<head>
<title> <? echo($title); ?> </title>
<link rel="stylesheet" type="text/css" href="/styles/some_css_file.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/styles/another_css_file.css" media="all"/>
<link rel="stylesheet" type="text/css" href="/styles/another_css_file.css" media="all"/>
<script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/scripts/some_jquery_plugin.js"></script>
<script type="text/javascript" src="/scripts/another_jquery_plugin.js"></script>
</head>
</html>
This is not a direct answer to your question, but it may help you.
If you are including that many css and JS files you should look into using Minify. Minify will take a bunch of css/js files and compress/combine them into one file, which will greatly speed up the loading of your site.
Using this could also help with your path concern, as you can specify directories and groups very easily.
You can find information about it here: Minify
Related
I have some HTML pages (in "web" folder) that use some styles and scripts, and i need to show these HTML pages using a PHP script. Here is a simplified version of the code i'm using:
<?php
readfile("web/index.html");
It works but it doesn't load any resources (css, js, images) because the URLs are not absolute :
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
It doesn't find the resources because it's looking for the css folder in the same folder as the PHP script.
Any workaround for this ?
You'll need to add add <base href='...'> into the html, like this (not tested):
$page_content=preg_replace("%</head%i","<base href='web/'></head",$page_content);
insert this after the readfile. See MDN web docs for more information about that tag.
In some browsers (Firefox and edge at least) it also works if you print the base tag before you output $page_content. It's dirty, but maybe it's good enough.
Simple you can use something like this
index.php
<html>
<head>
<php include("menu.php"); ?>
</head>
<body>
</body>
</html>
menu.php
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
for base path use some variable like $base = "http://localhost" then use your elements like <img scr="<?php $base ?>/images/myimage.jpg" />
Hope this answers your question
I've searched around and found people with similar problems, but nothing suggested seems to work for me.
Here's my file structure...
CSS
> style.css
INCLUDES
> header.php
> footer.php
IMGS
index.php
contact.php
about.php
terms.php
MUSEUM-PAGES
> dummy.php
the header.php which contains the link to css works fine for any html/php page that isn't nested in a sub-directory.
But when I use a sub-directory to better organise the files it falls apart. In this example museum-pages > dummy.php can't bring in the css. The content from the header and footer work fine, just not the CSS files.
I tried replacing the
<link rel="stylesheet" href='css/style.css' type="text/css" media="screen" title="no title" charset="utf-8"> in the header.php to...
/css/style.css
.
../
../../
but it will drop all non-sub directed references in other pages, such as the homepage. I am baffled.
Anyone able to help me please?
Use an absolute path:
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
This should work fine?
<link rel="stylesheet" href='/css/style.css' type="text/css" media="screen" title="no title" charset="utf-8">
The / is 'root'
EDIT
Since this didnt work, you could try this below, it isnt good practice IMHO however.. it will work.
<?php
// this is your header.php file
$linkToCss = "http://yoursite.com/css/styles.css";
?>
<link rel="stylesheet" href='<?php $linkToCss; ?>' type="text/css" media="screen" title="no title" charset="utf-8">
If that doesn't work there is another issue going on - try it see if it works.
In the beginning of the PHP file, I am defining the ROOT as
define('ROOT', dirname(__FILE__));
It works when i use something like
require_once(ROOT . DIRECTORY_SEPARATOR . 'config/bootstrap.php');
However, when using the same ROOT while including the css within the HTML seems to create a problem.
<html>
<head>
<title>PrePress ยท Login</title>
<link type="text/css" href=<?php echo ROOT . DS . 'views/type.css ?> rel="stylesheet">
</head>
<body>
Test
</body>
</html>
On tracing the path of the CSS file, the full path starts with http://localhost:8888/Users/.... Here I simply want my path to start from /Users/ which will be able to find my css file, whereas having the localhost changes the path and the file can no longer be found.
<link type="text/css" href="<?php echo $_SERVER["DOCUMENT_ROOT"]."/views/type.css"; ?>" rel="stylesheet" />
You do not need to use that format in an href. Just use
<link type="text/css" href="views/type.css" rel="stylesheet">
To give a relative address, which makes the code much more transportable
use
<?php $path = glob($_SERVER["DOCUMENT_ROOT"]."/views/type.css"); ?>
<link type="text/css" href="<?php $path; ?>" rel="stylesheet" />
You have to set the base url and that should link to your project folder. If you are not using a framework then I suggest you do.
Once you have set your base url you can call css and javascript from your header and footer respectively, and include the header and footer on your pages i.e $this->load->view('includes/header); and $this->load->view('includes/footer);
This is how you would typically call your scripts, I have only mentioned the href property within the tags as you should know the rest.
<script href="<?php echo base_url('link to your script goes here');?>" />
<link href="<?php echo base_url('link to your sheet goes here);?> />
This is a bit hard to explain but I'll give it a go. Lets say I have this in the header of a HTML file called myFile.html:
<!doctype html>
<head>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/hovers.js"></script>
<link rel="stylesheet" href="css/highlight.css">
</head>
I now want to include this file in a php file, lets say index.php. However, all my assets (css, js, etc) are stored in a folder called assets/.
After including (or before?) this html file, is there a way to change all the asset paths to point to assets/*. For example, 'css/reset.css' would be changed to 'assets/css/reset.css' and so on. Note that this isn't just limited to these lines in the header, but also includes things like image elements, etc.
If that's confusing, let me know and I'll try explaining again!
Cheers :)
I usually define a constant for things like this, then it's easily changeable via a config file. It does mean going through your template files and adding this constant variable in, but after that it becomes really easy to change.
So your file would be something like this:
<?php
require_once('config.php');
include('header.php');
config.php would be something like this:
<?php
define('ASSETS_ROOT','/assets/');
and header.php would be like this:
<!doctype html>
<head>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/reset.css" />
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/style.css" />
<script src="<?php echo ASSETS_ROOT; ?>js/hovers.js"></script>
<link rel="stylesheet" href="<?php echo ASSETS_ROOT; ?>css/highlight.css">
</head>
If I include an HTML page on a PHP page (say, index.php) with the following:
<?php
include ("../../forms/login/form.html");
?>
Then will form.php show up correctly in index.php? When I say correctly, I mean with all of its images and CSS.
The reason I am asking is because that's not the case with me. I tried it out, and it will show the form.html but without any styling...
Any help would be appreciated, thanks!
UPDATE:
Currently, I have the following on forms.html:
<link href="view.css" media="all" rel="stylesheet" type="text/css" />
<script src="view.js" type="text/javascript"></script>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
Now, forms.html displays correctly by itself.
On index.php, I have:
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>UofS :: Residence Life Management System</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include ("html/header.html");
?>
<?php
include ("php/navigation.php");
?>
<br></br>
<?php
include ("forms/login/form.html");
?>
<br></br>
<?php
include ("html/footer.html");
?>
</body>
</html>
The only reference to forms.html is through the php include(). There is no stylesheet pointing to it. This is the page that does not load forms.html correctly. Is this not right?
Thanks!
The path to your style sheet is probably relative. It will need to be relative to the url in the browser (index.php). Or make it an absolute path.
Edit since your update:
view.css and view.js will not be loaded because their paths are relative. Make those paths absolute or relative from the index.php page. Making them absolute will make them work whenever form.html is included from anywhere. Making the paths relative from index.php will make them work when included from there, but not when included from other directories.
Better yet, if you know you need to load those files, put the links on the index.php page and not the form.html page.
Also note that you can use paths that start with the root of your site, you do not have to include the host and domain name:
<link href="/css/style.css" rel="stylesheet" type="text/css" />
The slash before "css/style.css" will make that an absolute path that will work on your live and dev servers.
Edit...
Assuming that your index.php file is at the root level, try this in forms.html:
<link href="/forms/login/view.css" media="all" rel="stylesheet" type="text/css" />
<script src="/forms/login/view.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
show the form.html but without any styling...
You'll need to adjust the reference to the CSS file accordingly. Probably a better idea to use absolute path.
IF BEFORE
<link rel="stylesheet" type="text/css" href="style.css" />
NOW:
<link rel="stylesheet" type="text/css" href="http://host/path/to/style.css" />
It will include the HTML file verbatim in the PHP page. If the paths on external resources are correct based on the URL of the PHP page then they will show up.