I am trying to use PHP to read, then modify and echo an HTML file.
The included HTML file contains external JS, CSS references - all relative paths
for example...
<script src="js/myJavascript.js"></script>
Problem :
The location of the PHP modifier file is not the same as the location of the included HTML file, and therefore the external includes are not loaded. I guess...
The solution of using absolute paths to reference external resources in the HTML file is not ideal to say the least...
What can be done to tell PHP that the path context of the included HTML file is the same as the directory from which it is being included and NOT the directory of the modifier file?
Thanks!
Found a solution!
<base href="path_to_the_html" target="_blank">
according to W3Schools :
This would specify a default URL and a default target for all links on a page...
Related
This is my project structure:
I would like to import the common header (top.html) in all new pages, but I don't know why when I include top.html, it doesn't import head's link with CSS and JS source (external).
If I run directly top.html, it works perfectly and can read CSS and JS source.
# I used this path for include
include '../app/views/common/top.html';
This may be because of incorrect path.
For example, inside top.html you are using relative path like
<script src="/script.js" />
Which will automatically include SITE_URL+"app/views/common/script.js". Here this is correct path.
but after using
include '../app/views/common/top.html'
it will search file script.js on "/app/views/home/" path which is now incorrect path.
To solve this issue you can define path for js and css file in php and should use absolute path.
For Example:
<script src="<?=SITE_PUBLIC_PATH?>/script.js" />
I have a form handler which is written in PHP and resides in a different directory than the html files. When the handler runs, it needs to include one of the html files. The html files have relative hrefs in them, which break because the page was served from the PHP directory, not the html directory.
For example, index.html contains
<link rel="stylesheet" type="text/css" href="css/site_global.css?4013920463"/>
These links are produced by Adobe Muse and expect that "css" is a subdirectory under the location of the html files and that the page was served from the html directory. Again, since I'm serving the page from the PHP directory, the relative links break.
Short of putting in absolute paths for the hrefs, is there any other technique I should consider? I really don't want to put in absolute paths because they will break for other reasons.
Ideally, I'd like to use some sort of method that allows me to set the "working path" in the browser - so that I can tell it to fetch hrefs from the right place.
Relative paths in a browser are computed based on the current page path (see here). If you are looking at http://foo.bar/one/page.html , the site_global.css path will be http://foo.bar/one/css/site_global.css .
If I understood your question, you can use the element to set a base URL for all the relative links in the page.
See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
try $_SERVER['DOCUMENT_ROOT'], gives the path to your base directory with current working dir
or
try echo realpath(dirname(FILE));
I am trying to make a template for my website.
Basically taking out all the common stuff out using php's include function.
I have made a navigationbar.php and samplepage.php.
navigationbar has all the links to stylesheets etc.
When they are in the same folder and I include navigationbar.php in samplepage it works just fine.
However when i move samplepage.php to a subdirectory (leaving navigationbar.php in the same folder) and
link navigationbar.php with the menu doesn't come formatted.
it seems samplepage is getting contents from navigationbar.php but navigationbar is not linking to the css files.
Can anyone tell what I'm doing wrong here?
i'm using xampp and have tried with both relative and absolute paths- (include '../navigation.php' and 'localhost/folder/navigation.php')
Make the paths of your css files absolute (i.e. start with / and specify the full path). This will allow them to work correctly from any path.
When including a file in PHP, the url's are relative to the file you are including into. Not to the file you are including.
So you need to change your paths 'navigationbar.php'
Try using something along the lines of this to link to your header/footer files:
include($_SERVER['DOCUMENT_ROOT'].'/path_to/header.php');
and then appropriately link to your .js/.css files within header.
Where your PHP files are has no direct influence. You have to make sure that the resulting HTML has the correct paths to all CSS/JS/img files etc. You may want to post your file structure here and show the code that calls the relevant CSS files.
I've been developing my site with the site directory structure as
www
img
javascript
include
index.php
Now I want to change it to
www
index.php
dir1
dir2
...
themes
theme1
img
javascript
include
index.php
At the theme level index.php, earlier I've my paths to javscript files as javascript/file1.js or so.
Now I've changed the paths to <?php echo THEME_PATH . "javascript/file1.js"?>
This includes the js files, however my problem is when I reached inside the js file.
For example, in one script.js file, I've a jquery method called as
$('#pop-con').html('<p><img src="img/ajax-loader.gif" width="220" height="19" /></p>');
I can't use php inside the js file. So how do I change the paths similar to the php implementation above??
Relative paths
Probably one of the easiest ways to solve it is using relative paths.
In your case you will need to be one directory up (../), so it would be:
$('#pop-con').html('<p><img src="../img/ajax-loader.gif" width="220" height="19" /></p>');
You can have a small <script> on your pages that creates a global variable to store the "THEME_PATH" value:
<script>
window['THEME_PATH'] = '<?php echo THEME_PATH?>';
</script>
Then your JavaScript files can just look for the global variable and use it to construct paths. I keep such code in a global template header that's used for all the pages in my application. There really are only a very small number of things like that to worry about; in my application I think there are like 4 or 5 items of information like that to communicate with included .js files.
Solution, in case anyone else need it.
I put the following code in my theme level index.php file
<script>
window.themePath = "<?php echo $site_info[theme_style_path]; ?>";
</script>
And use the javascript global variable to append the path.
The source of the Javascript is irrelevant for the purposes of HTML being embedded within the page. What matters is the location of the page the HTML is embedded within.
For instance, if you load a page from example.com/index.php, and some Javascript loaded from example.com/js/script.js inserts some HTML into the main page, then image path references are going to be relative to /, as that's where the page was loaded from, not from /js.
As for embedding PHP in JS, you're right - but you can have PHP emit a .js file trivially:
<?php
header('Content-type: text/javascript');
?>
var settings = <?php echo json_encode($SETTINGS_ARRAY); ?>;
would generate perfectly valid Javascript, even thought it came from a PHP file.
We're building a PHP application which allows the user to upload a zip file with an index.html file and associated images, js, css files - which serves as a "template" for their page.
To use the index.html file through our application, we must replace all occurrences of code like this:
<img src="images/image1.jpg">
with
<img src="~~~TEMPLATEPATH~~~/images/image1.jpg">
And then save it on our server.
When displaying this template to the web-user, ~~~TEMPLATEPATH~~~ is replaced with the proper path where the template file's index.html is located on our server.
All "file references" must be preceded with this variable.
Can someone suggest the ideal way of doing this - the regular expression that would do this (in php or a shell script we can call)? Note: Naturally, we dont want to insert this variablename when there is an absolute path, eg:
<img src="http://www.example2.com/images/image1.jpg">
Is our method (process) the right way of "allowing" templates? Is that how other sites function?
Use a proper HTML parser to do this.