I’m creating a new site and in order to have the same navigation and footer in each page I created a footer and navigation files .
I put footer.php and navigation.php inside folder /include
this it the structure of my site so far:
old site folder
index.html
other.html
New Site folder
/index.php
/biography.php
/style folder (style.css, responsive.css)
/images folder
/include folder (footer.php , navigation.php)
/media folder (videos.php)
the problems I have are with images included in footer and links within the navigation menu
for instance, on file biography.php I put on the footer area this calls the footer just fine but the images I have in the footer are broken (the images reside in the images folder)
the same for navigation on biography.php, I have but the links in nav menu go back to old site folder, for instance index.php links to oldsite/index.php instead of newsite/index.php
the file videos.php footer and navigation display all ok , images and links
I guess the issue is with the paths, I tried adding / and dots but it doesn’t work
I don’t know what to do.. :(
You can define definite path to your images:
for example:
<img src='<?="$_SERVER['HTTP_HOST']"."/images/footer.png"?>' />
you can include from your /include/footer.php with
dirname(__FILE__).'/images/filetoinclude'
Edit:
If you want to display images that are served by your webserver, you will have to specify either absolute path /images/images.jpg or the fully qualified path including its host as suggested above
Your problem can solve by HTML.
You must use absolute path in image source.
<img src="/images/footer.png" />
When you use slash in first of src, that mean start path from root of site.
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.
On my php site I'm trying to include html pages outside the root folder (the html pages change automatically)
if I include an html page I get the 404 error for the linked files and if I include the linked files too they aren't displayed correctly
path/site/root/index.php
...
include("path/html/index1.html");
include("path/html/index1_files/img.png");
...
path/html/index1.html
...
<img src="index1_files/img.png">
...
result:
You need to specify the directory properly. So, in your case, when linking to the image, replace <img src="index1_files/img.png"> with <img src="./index1_files/img.png">. The ./ goes back into the folder the file is saved in, and ../ goes up one level. Your code is looking for a folder called index1_files within the current page.
On my project work I have got two css file one for index-page another for home-page.I thought that I should keep those two css files on a folder so, if on coming days if i added more css files then it will be easy for me to find them all in one folder so, i did.I have one folder for images also.
My question is that when I add an image from css (background-image property) to my any page it won't display there but other images which were added from html img src=' ' property they are all displayed.
when i again placed that two css files from it's css folder to outside together with index.php,home.php then all those image which were not shown earlier by css background-image property were shown again! what may be the reason behind happening that???
I think you may have a filepath issue here, though I don't have much information to go on. If your css files are in let's say "main/css/" and you're trying to access an image in a directory above it, then you're either going to have to give the background-image src an absolute path or use ../ to break out of your current directory. Example:
if your image resides in the main folder 1 level above your css folder:
#myImage {
background-image: src("../myImagePic.png");
}
This is probably the reason why when you add the image from your HTML file that's in the main directory it works and then in your CSS which is located inside a CSS folder inside of the main directory it doesn't work. Hopefully this helps, didn't have much to go on.
I design and develop websites using php. I use
`includes(layouts/header.php);`
in every php page across my website. My directory structure is:
library
layouts ( header, footer, sidebar )
css
js
index.php
about.php
but now if I create new dir to keep, say, admin files or staff files or user files in different folders like:
library
layouts ( header, footer, sidebar )
css
user
index.php
login.php
myaccount.php
js
index.php
about.php
Now if I do
include('../layouts/header.php');
in my file under user dir then I don't get css in the page. That is because the relative path to .css file changes.
I want to know how to manage all this. Is there any way or I have to write new, say, user_header.php in layouts folder?
Use a global variable for site path and combine that with the path of your css file relative to your application root path.
for example in your header.php file define:
$SITE_PATH = "THE_PATH_TO_YOUR_WEB_APPLICATION/";
and then when you want to echo the link tag for css use:
<link rel="stylesheet" href="<? echo $SITE_PATH;?>css/yourCssFile.css" type="text/css">
I'm having problems with the paths to my first wordpress theme. Post images and stuff not related to css is located in wordpress_folder/blog-images/ and in index.php when I link to images I use this path: blog-images/img.jpg
The problem is now that when I want to link to the same image from another file (not index.php) in this case single.php wich displays one blog post, the correct path is now ../../../blog-images/img.jpg
This is causing problems in the includes like sidebar etc. sidebar.php works fine when called from index.php but the images path is changed if sidebar.php is called from single.php.
Does anyone know what's going on?
If you are creating these links from within php scripts, I would suggest using the site_url() function to get the URL for your wordpress install and then appending your images path to the end of that. If you are editing static theme files like css, then you should use /wordpress_folder/blog_images/img.jpg.
Something like <img src="<?php echo site_url() ?>/blog_images/img.jpg" /> should be sufficient from theme files.
The reason that paths are chaning is because if you are in wordpress_folder then the path blog_images/img.jpg resolves to wordpress_folder/blog_images/img.jpg but if you are on a post that has the url yoursite.com/wordpress_folder/2011/09/category/my_great_post then the path would resolve to wordpress_folder/2011/09/category/blog_images/img.jpg which is obviously incorrect.
For this reason you should try to use the absolute path or full URL so that no matter what file/folder/url you are linking from, the path will always be correct.
The main downside you may run into is that if you were to change the name of your wordpress folder, or remove it altogether, then you may need to make a lot of edits to reflect that. But in any case, you should put the / in front of your path so that it can be referenced the same from everywhere.
Also check out the site_url() reference page, it lists some other helpful functions at the bottom that may be useful to you.
I thought this was a little unclear from drew's answer, so I am adding a little bit more in a separate answer. His advice is sound and I agree with him.
If you prepend a url with a / then it will navigate based on your site url. Without the slash it uses relative navigation.
So here are some examples for www.mydomain.com
//always shows the image located at http://www.mydomain.com/myfolder/pic.png
//no matter what the url is
<img src="/myfolder/pic.png" />
//shows the image located relative to the current path
//if current url is http://www.mydomain.com/posts/ then the image will come from
//http://www.mydomain.com/posts/myfolder/pic.png
<img src="myfolder/pic.png" />
If you are creating links dynamically from php side then you will want to use site_url().
If you are creating links to your theme directory folder then you will want to use bloginfo('template_directory')