I am writing a website and I decided to separate my header into it's own php file and then use the include statement to insert it back into my webpage. The issue I'm having is on my index.php I'm sourcing my logo as such:
<img class='logo' src='images/logo.png'>
and on my meats/sausage.php page I source it as such:
<img class='logo' src='../images/logo.png'>
Is there a superglobal or something I can use instead to direct both pages to the correct location or do I need to make separate header versions for each of the 2 pages?
Note: I'm using XAMPP and localhost rather then running it on the web just yet.
Use a constant or something that defines your base directory and work with that.
For example:
<?php
$baseDirectory = __DIR__;
function assets_path($append)
{
return "{$baseDirectory}{$append}";
}
And then:
<img class="logo" src="<?= assets_path('images/logo.png') ?>">
Choosing where to place this is on you.
A possible option would be to use .htaccess file and the RewriteRule like so:
RewriteRule ^(.*)SiteAssets/(.*)$ http://YourSite.com/AssetsRoot/$2
And then use like this:
<img class="logo" src="SiteAssets/images/logo.png">
Also, if your DocumentRoot setting is correctly set in httpd.conf, you could simply use this throughout your site:
<img class="logo" src="/images/logo.png">
See https://stackoverflow.com/a/7823598/715105
Base tag
<head>
<base href="https://example.com/">
</head>
This will set your base on every page. No need to use ../images
see https://www.w3schools.com/tags/tag_base.asp
Duplicate of this question:
src absolute path problem
The trick was to reference it as such:
<img src="http:\\localhost\site\img\mypicture.jpg"/>
but with forward slashes rather then backward slashes
Related
I'm stuck in a simple thing as loading an image in php.
All included php files are in a directory called includes.
Index.php is in root folder.
When I call img src from the php file located in the root folder, I can see images.
But when I include a section that is supposed to load an image like that:
<?php include("includes/section.php"); ?>
calling this:
<div class = "right">
<h1> news </h1>
<hr>
echo '<img src="../img/do.png" width="200" alt="Rifrazione news/>';
<p class = "rightp">Blabla </p><br
</div><!--end of right-->
I get nothing
for images I prefare use global variable.
Try do something like this:
<?
$baseUrl = "http://localhost"; // CHANGE IT TO YOUR URL
?>
<div class = "right">
<h1> news </h1>
<hr>
<?
echo '<img src="'.$baseUrl.'/img/do.png" width="200" alt="Rifrazione news" />';
?>
<p class = "rightp">Blabla </p><br />
</div><!--end of right-->
The file you're currently in is your current working directory. So find the location of your image from the directory your index.php is in, that means probably removing the ../. If you have any doubts echo getcwd();.
NEVER do what Adam suggested. You should always use file system paths, never url paths to local files. EDIT Reasoning: Hotlinking is part of it as he may not be aware of why something isn't working as it has worked in other locations but mostly due to routing/.htaccess/url rewriting. If he were to move on later to an MVC or similar framework putting localhost/controller/action will not return his image, but he may not be sure why as this is a bad habit he has already picked up. The other reason was for ease-of-use, if he puts a path like ./image/here.jpg opposed to localhost*/here.jpg he may have to go through and rewrite every link if he were to migrate later to an external server.
Example to help visualize better:
If you have the following directory:
my_site/
js/
css/
images/
image.jpg
index.php
bob/
bob.php
contactBob.php
If you were viewing index.php, your link to images would be /images/image.jpg.
If you were viewing contactBob.php your link to images would be ../images/image.jpg.
In HTML5, you can declare the <base> as a DOM element.
After searching and testing...it was none of that.
The only thing missing was the php tag at the beginning of the bracket.
You don't need variables at all.
This syntax is working as intended.
<?php
echo '<img src="img/do.png" width="120" alt="Rifrazione news"/>';
?>
Thanks for jumping in, anyway.
I would like to include a header in every page using PHP, so that when I edit the header I won't have to change it on every page. However I am pretty sure if I do that, the relative links will do it according to the page that the PHP is included in. Is there any problem using absolute links to do this? Sorry if this is a simple question and just wondering if there are any rules related to this.
<header>
<div class="navbar">
<img style="margin:10px;" src="../images/logo.png" alt="logo"/>
<img style="position:relative;bottom:14px;" src="../images/line.png" alt="line"/>
<img class="navbaricon" id="one" src="../images/home.png" alt="home"/>
<img class="navbaricon" id="two" src="../images/artist.png" alt="artists"/>
<img class="navbaricon" id="three" src="../images/releases.png" alt="releases"/>
<img class="navbaricon" id="four" src="../images/join.png" alt="join"/>
</div>
<div class="artists">
<div class="artistlinks">
<p>Brady Hartvigsen</p>
<img src="../images/artists/bradymain.jpg" alt="Brady Hartvigsen"/>
<p>Catalyst</p>
<img src="../images/artists/catalystmain.jpg" alt="Catalyst"/>
<p>Emmi Moffitt</p>
<img src="../images/artists/emmimain.jpg" alt="Emmi Moffitt"/>
<p>Frederik Jyll</p>
<img src="../images/artists/fredmain.jpg" alt="Frederik Jyll"/>
<p>J.R. Hansen</p>
<img src="../images/artists/jrmain.jpg" alt="JR Hansen"/>
<p>Kate Berry</p>
<img src="../images/artists/katemain.jpg" alt="Kate Berry"/>
<p>Ryan Cluff</p>
<img src="../images/artists/ryanmain.jpg" alt="Ryan Cluff"/>
<p>Silter</p>
<img src="../images/artists/siltermain.jpg" alt="Silter"/>
</div>
</div>
<script>
$("a:nth-child(4)").click(function () {
$(".artists").animate({width:'toggle'},500);
});
</script>
</header>
This is what my header currently looks like
You can use both absolute and relative paths. When using relative paths you have to make sure the path is relative from the file you are including from.
I would recommend to use relative paths, since moving the site to another server or path on the server would be much easier.
Also, you may be talking about relative html links. I solve that by setting a "rel" parameter in the main file.
Both types of relative solved in this sample:
/mysite/webroot/index.php
<?php
define('RELPATH','');
include_once(RELPATH.'../includes/header.inc.php');
...
?>
/mysite/webroot/otherpage/index.php
<?php
define('RELPATH','../');
include_once(RELPATH.'../includes/header.inc.php');
...
?>
/mysite/includes/header.inc.php
<html>
....
<body>
..
Front page<br />
Other page<br />
I believe you're referring to including a PHP file in another.
Is there a rule? No. But it is always best to stick to relative paths. Pay attention to the following:
If you use absolute paths to folders/sub-folders you'll have trouble when the site is moved to a different location (even within the same domain). So stick to relative references.
Have some sort of 'escape route' so that if someone tries to read an include file directly it should not make the system vulnerable. For example, you may have a variable set to a certain value and check for it in the file. This is not necessarily a security thing but it may prevent the site from 'behaving in an unexpected manner'.
Example of including a php file in another php file...
Steps:
1. Create a separate file (eg: myheader.php). Remember, this must be PHP. Not HTML.
2. Paste your header in it. Save.
3. In the file that needs to call it, include this line or something similar:
<?php include "myheader.php">
if the file is in a folder above the current folder, use something like this:
<?php include "../myheader.php">
To go two levels above the current folder, use this:
<?php include "../../myheader.php">
If the file is in a sub folder within the current folder, use this:
<?php include "SubFolderName/myheader.php">
I'm very new to php, but this problem may require regex manipulation. Basically all "" in my website points to localhost (i.e. img src="http://localhost/folder/img.png" ).
When viewed under source, the "localhost" doesn't show up, but if clicked to get image address, it'll show "localhost". What i need is then to add the full path to that img src (i.e. img src="http://mywebsite.com/folder/img.png" ).
How do i go about doing this?
Any help would be greatly appreciated.
Thanks a lot
Use absolute URLs in your project to reduce conflicts and messy overheads. To use absolute URLs, just define a global constant BASE_URL in your common file like:
define("BASE_URL", "http://localhost/project_folder", true);
Now use it everywhere, like:
<img src="<?php echo BASE_URL.'/img/image.png' ?>" />
In source code, generated html will look like: <img src="http://localhost/project_folder/img/image.png" />
Similary you can use this like:
<script type="text/javascript" src="<?php echo BASE_URL ?>/js/my_script.js"></script>
Consider the following directory structure:
ROOT
------ images
............... logo.png
------ includes
............... vars.php
------ layout
............... content.php
------ index.php
How do I define a path constant for logo.png in vars.php that is accessible in both index.php and content.php? Should be compatible with HTML Tags as a relative path.
<img src="<?php echo IMAGE_PATH; ?>">
which should be parsed as
<img src="images/logo.png"> <!-- if used in index.php -->
and
<img src="../images/logo.png"> <!-- if used in content.php -->
New Question (EDIT): Does root-relative path work when including php files using include / require methods?
Try setting the <base> tag in the <head> section of your code.
All your images, css, and js files will use this instead of the url in the address bar.
Info on base
Absolute url or root paths will give you the least amount of headaces. Trust me, when the system grows you'll regret that setup.
It is a perfectly legal way to reference things. (as you ask in the comments)
If you're worried about setups between domains, just create a config variable with the absolute path to the domain / directory / etc
You can use "root-relative" paths. Simply link to everything with a forward slash at the beginning, i.e.
<img src="/images/logo.png">
This will resolve to http://yoursite.com/images/logo.png from every page on yoursite.com.
simply specify all paths as relative to the root
<img src="/images/logo.png"> <!-- will work anywhere -->
I'd suggest, primarily, that you use root-relative paths. This is only to reduce the complications of moving your site to another host, and also it allows for consistent paths (rather than using an if() condition to test from where the script's being run).
But otherwise, your suggestion would be fine.
I would use something like an application base URL:
define('APP_URL', 'http://example.com/path/to/app');
echo '<img src="'.APP_URL.IMAGE_PATH.'">';
Or to have it more convenient, write a function that resolves your relative URL to an absolute URL.
On the one hand mod_rewrite allows me to make userfriendly urls redirecting requests to proper script but on the other I can't use relative links because they will point at nonexistent files.
A little example:
mod_rewrite redirects request
http://site.ru/param/one/page.html
at http://site.ru/script.php
while I have "myimg.jpeg" file at the same folder I can't use relative link <img src="myimg.jpeg /> cause in that case the browser will try to load img from the "http://site.ru/param/one/myimg.jpeg" address.
While using mod_rewrite what is the common practice to render right path to the img/css/js files?
I have 2 ideas about the realization:
1) to add base tag like that <base href="http://site.ru/" />
2) to define a variable with the baseUrl and then use it while rendering src attributes like that:
$baseUrl = 'http://site.ru/';
...
echo '<img src="' . $baseUrl . 'myimg.jpeg" />
Which is the best solution and are there any other ways to solve the problem?
Don't use relative URLs. In almost all cases, a $baseUrl variable is unnecessary - just reference things by their path from the site's root.
i.e. <img src="/images/myimg.jpeg" /> instead of <img src="images/myimg.jpeg" />