Forum
Root Directory Issue
Hello
I created a layout for for the header and footer of my webpages and included them in the index page as if I ever needed to change a link in the footer etc it would mean that I wouldn't have to change it in every page of the website. Everything works fine until I'm in the blog folder and viewing the index.php file in the browser, which is above the root directory.
Below is the header.php code
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title><?php perch_pages_title(); ?></title> <?php perch_page_attributes(array( 'template' => 'seo.html' )); ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/normalize.css" rel="stylesheet" /> <link href="css/all.css" rel="stylesheet" /> <link rel="shortcut icon" href="images/favicon.png" />
<!--[if lt IE 9]> <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="js/responsiveslides.min.js"></script>
<script> $(function () {
// Slideshow 1
$(".rslides1").responsiveSlides({
speed: 1000,
});
});
</script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
<script> var sourceSwap = function () { var $this = $(this); var newSource = $this.data('alt-src'); $this.data('alt-src', $this.attr('src')); $this.attr('src', newSource); }
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
</script>
</head>
<body>
<div class="container">
<div class="nav_bg">
<nav class="clearfix">
<ul class="clearfix">
<li><a href="iphone.php">iPHONE REPAIR</a></li>
<li><a href="macbook.php">MACBOOK REPAIR</a></li>
<li><a href="imac.php">iMAC REPAIR</a></li>
<li><a href="imac.php">iPAD REPAIR</a></li>
<li><a href="ipod.php">iPOD REPAIR</a></li>
<li><a href="shop.php">ONLINE SHOP</a></li>
</ul>
<a href="#" id="pull"></a>
</nav><!-- end of mainnav -->
</div>
<div id="header_bg">
<header>
<div class="cell_full">
<a href="index.php"><img id="logo" src="img/logo.fw.png" alt="Fix It Logo" /></a>
<div class="contact_info_bg"> <div id="contact_info_left"> <p>Newry Office:<br /> Dundalk Office:<br /> Email:</p> </div>
<div id="contact_info_right">
<p>028 30839888<br />
042 9329399<br />
<a href="mailto:info@iphonerepair.ie">info@iphonerepair.ie</a></p>
</div>
</div>
</div>
</header><!-- end of header -->
</div>
<div id="livechat"> <a href="#"><img src="img/livechat.fw.png" alt="Live Chat" /></a> </div>
<div class="maincontent">
I googled solutions and came across DIR. Is there anything I could put in front of a hyperlink to make sure that it goes back to the root directory. For example, if there another method of doing this instead of using ../../ etc. If you know a solution to this, could you provide an example.
Many Thanks Joshua
You just need to start your links to CSS, JavaScript, images and so forth with a /
/css/mycssfile.css will always resolve to a css file called 'mycssfile.css' in the 'css' directory that is in root.
Rachel tried that and it didn't work. Before deciding on creating layouts for the header and footer php files I put ../ infront the css/js/images/ahref and everything worked perfectly however as you know in terms time saving if a link in the footer needed to be updated, this is the way to go about it instead of having to edit every page within the website.
The root directory looks something like this
blog - index.php - post.php etc css - all.css js - all.js img - logo.png - bg.png iphone.php index.php etc.
You any other solutions in order to resolve this?
Thanks again for your help. Joshua
I'm not sure then what you are asking as the question you seemed to be asking would be solved by making assets root relative.
Is the issue that if you use an include your assest - images, css and javascript are then linked incorrectly from pages in subfolders?
If not then can you explain what you are seeing, and what you expected to happen.
Yes rachel thats the exact issue. When I include <?php perch_layout('header'); ?> and <?php perch_layout('footer'); ?> in the index file, everything works fine, it is when I do the same for the blog index the probelms start happening.
What if I put put my css, js, fonts and img files inside the perch/core/assets folder and modified the config.php file, would this resolve the issue? Is this a possible solution?
Regards Joshua
Do not put anything in the
perch/corefolder.You can make your likes root-relative by starting the path with a
/Drew so instead of saving the header and footer.php layout files in perch/core/layouts folder, do I save them in a layouts folder outside the perch directory instead? Would I still use <?php perch_layout('footer'); ?> to include the file or would I have to use a PHP include instead?
Thanks for your help.
Layout files live in
perch/templates/layouts. This is detailed in the documentation here: https://docs.grabaperch.com/docs/layouts/You should never put anything in the core folder as to upgrade you replace this folder. No Perch instructions will have you editing files in this folder.
Rachel have you an email address I could send the files onto you to, I think if you see the code you'll understand better what I'm trying to do / what the probelm is?
Regards Joshua
If your problem is too complex to explain via the forum, then it's probably too complex and specific for us to be able to help with.
I gave up with the idea of using the templates and just went back to how I had it at the start.
Thanks for all your help.