Search and replace references to local files in html file? - php

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.

Related

Cannot load images in HTML when put in PHP document

I am new to PHP and just using it to make a login system for my HTML page. I was recently trying to make my HTML page into a PHP one so I threw all of the HTML into a PHP document and now everything works except for images. My CSS is connected to the page as well, but the background images do not work either, please help.
I am literally using images like this:
<img src='filepathhere'>
and for CSS and I am trying to use it like this for a background image:
body {
background-image:url('filepathhere');
}
None of the images will load. I am using file paths, which I saw may be the problem, but I don't know how to make them into URLs. Either way, I have no idea how to use PHP to display the images, and nothing I have searched for online has worked so far.
mainroute
images
htmlimage
<img src="C:\thinkfastrap\..."> will not work when you are serving the page via a web server since C:\thinkfastrap\... is not in the web root so the server cannot access C:\.... You will need to change your image URLs to something like /login/images/ThinkFastRapIcon.png.
For your CSS file, URLs must be relative to the folder where the CSS file resides. So this:
background-image:url('foo.jpg');
assumes foo.jpg is in the same folder as the CSS file. Based on the directory structure you posted, you probably want:
background-image:url('/login/images/BackgroundIMG.jpg'); /* Start from docroot */
or:
background-image:url('images/BackgroundIMG.jpg'); /* Go down 1 folder to images/... */

php script includes html in different directory

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));

PHP included HTML relative path of external JS & CSS

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...

common elements php html navbar

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.

CSS failure when using INCLUDE Function

I downloaded a Template + CSS File for a Website that I'm Building, the template worked well until I tried to break it down and put every code in its own file (for easy modification and editing in the future).
So, when I cut the head part which included (Title + Meta Data .. etc ), and put it in its own file, and replaced it (for sure) with an include() function, I lost the CSS styles and returned to the basic & standard style (Black & white with no extra format .. etc)
Where did I Go wrong? Knowing that here is the include function that I've used:
<?php
include 'files/head.php';
?>
With an URL like file:///C:/xampp/htdocs/test6/index.php PHP is NOT executed. You must run it with apache being involved. Currently you are opening your PHP script as a regular txt or html file - it is just passed to browser without processing.
In order to make include function work you must run it with apache. As you are using xamp, I think you should simply open it with URL like http://localhost/test6/index.php In this case, apache will get that request and pass it to PHP. PHP engine will interpret your PHP script and "replace" include files/head.php with a content of head.php.
If everything is Ok, after pressing Ctrl+U (or looking at HTML with Developer Tools or Firebug) you should see a content of head.php instead of <?php include ....
Please note that css files should be linked with relative URL like css/screen.css. Or absolute URL like http://localhost/test6/css/screen.css. like Search for relative and absolute URLs in google for more info.

Categories