I'm new to smarty and I'm seeing this line
<link rel="shortcut icon" href="
{$system['system_url']}/themes/{$system['theme']}/images/favicon.png" />
This line is used to set favicon but they can use direct the image url "images/favicon.png" so why they used
It is a best practice to isolate different resources as much as possible. Referencing a static file such as a favicon directly creates a direct link between the web framework and web layout.
Using the types of variables you see in your example, makes the path address to the favicon dynamic so if the app where to be moved, or renamed, the links between layout and framework would still work without needing to manually change all path addresses.
Related
I'm recently doing a website for a school project. In order to organize my work, I create a tree folder that keeps all the work organized. It is similar like this:
Back-Office
Pages
Home
home_test1.php
home_test2.php
home_test3.php
Login
Folder_Login
login.php
logout.php
Resources
CSS
style_home.css
style_navbar.css
style_footer.css
JS
script_home.css
script_navbar.css
Sections
navbar.php
footer.php
After all, with the require() method available in PHP, I want to call the "navbar.php" file to the "home_test1.php", "home_test2.php" and "home_test3.php", but the CSS style that is connected with the file "navbar.php" ("style_navbar.php"), doesn't display.
I've tried to change the path of the CSS style in the file "navbar.php" when I require() to the other file ("home_test1.php") and the CSS style shows up, but wont display in other file with a different path. How can I make this work dynamically? Sorry for long post and bad English grammar.
Thank you in advance.
You need to set your css and js files with absolute path instead of relative path
$dir = realpath($_SERVER["DOCUMENT_ROOT"]);
<link rel="stylesheet" href="<?php echo $dir.'/resources/css/style_home.css'; ?>" >
Without physically seeing you code it is quite hard to debug however there is an "obvious" answer that I'll suggest as a starting point.
The important thing to remember is that PHP and HTML are processed in completely different places. PHP executes on the server and should be used to build a full HTML "document" which it gives to the client/browser. The client/browser then reads the document provided and renders it according to HTML standards.
Calling require() will tell PHP to get the file and slot its contents directly where it was called and as it is a CSS file it will need to sit within the style tags. With a lot of modern browsers, if you use require on a file outside of the html tags, the content will be dumped at the top of the screen or simply ignored due to invalid syntax.
Alternatively if you would like to simply use tell the browser to include the CSS file, you could use the good old method of using <link rel="stylesheet" href="/path/to/file">. It's good to know when and when not to use PHP.
PS: You have .css files in your JS directory.
In PHP, there is a global variable containing various details related to the server. It's called $_SERVER. It contains also the root:-
$_SERVER['DOCUMENT_ROOT']
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
<link rel="stylesheet" href="<?php echo $path.= '/Resources/CSS/style_navbar.css';?>" />
?>
site example: http://ec2-107-22-119-73.compute-1.amazonaws.com/index.php/info/databases
Working Example: http://jscrollpane.kelvinluck.com/mwheel_intent.html
I cant get scrollwheel to work.
If you cant tell from the URL, my site is an expressionengine site. Using coldfusion and junk like that to build the pages.
anyone? (I tried searching for this issue, but no one seems to simply not be able to make scroll work.)
Ensure the paths to your JavaScript/CSS files are named appropriately and aren't throwing 404 errors.
The easiest way to ensure valid links to your assets is to use the {site_url} single global variable when linking assets in your templates:
<script src="{site_url}/script/jquery.mousewheel.js"></script>
<script src="{site_url}/script/jquery.jscrollpane.min.js"></script>
Which would result in the following:
<script src="http://example.com/script/jquery.mousewheel.js"></script>
<script src="http://example.com/script/jquery.jscrollpane.min.js"></script>
Since you're using ExpressionEngine's templates for your CSS — as opposed to flat files — you may want to give those template names a .css file extension.
So instead of:
<link rel="stylesheet" href="/index.php?css=site/master.v.1324329515" />
You'd have:
<link rel="stylesheet" href="/index.php?css=site/master.css.v.1324329515" />
This isn't absolutely necessary since EE will set the proper text/css MIME type based on the template type. However, it does make reading and debugging the source code easier, and is more of a standard practice.
Understandably, many beginners reference and borrow code from the Agile Records ExpressionEngine Theme that's available during new EE installations, so it's easy to recognize EllisLab's approach to markup and architecture — be it for the better or worse.
Bonus: remove the cache-busting timestamp (v.1324329515) in ExpressionEngine from CSS URLs, use the {path} variable instead of the {stylesheet} variable:
// With Cache-Busting String Appended
// http://example.com/index.php?css=site/master.css.v.1324329515"
<link rel="stylesheet" href="{stylesheet=site/master}" />
// Without Cache-Busting String
// http://example.com/index.php/site/master.css
<link rel="stylesheet" href="{path=site/master}" />
Wondering if there is a way to use paths relative to the template storage location in the Twig templating engine.
The scenario is as follows:
I have a Typo3 website where my application resides in fileadmin/myApplication. I am using Twig as a template engine to render multilingual content that is loaded dynamically from JSON files. Some of my template files contain paths to images that, given the nature of Typo3, need to have a src-path of fileadmin/myApplication/img/...
Now, if I want to test a new version of my application, I want to be able to create a directory fileadmin/myApplication2.0 without having to change the paths to my images inside the template files.
There are templating engines (e.g. raintpl, see this link) that translate relative paths to server file paths. Is there an easy way of achieving the same effect in Twig?
e.g.
templates/template.html
img/logo.png
outputs
<img src="fileadmin/myApplication2.0/img/logo.png">
This is how rain.tpl does it:
WYSIWYG - Path replace
This cool feature allows designers to create templates as regular HTML with images and styles with relative paths, RainTPL replaces automatically these paths with the correct server paths.
Absolute paths and paths ending with # will be not changed.
<link href="style.css" type="text/css" rel="stylesheet">
<img src="img/logo.gif">
Output html:
<link href="tpl/style.css" type="text/css" rel="stylesheet">
<img src="tpl/img/logo.gif">
Note: if you set raintpl::$base_url, RainTPL will replace the path with raintpl::$base_url.
The path in the src attribute is a relative URL, not a relative file path to the file system on your server, how you organize your files inside your directories.
The relative URL will be resolved to the base URL of the document the template will be part of / present in. So you can use relative URLs, but you need to know to what they relate to to have them properly working.
In your case a quick solution might be to use
<img src="/img/logo.png">
If your website resides in the web-root.
Another way is to have a template function that takes care to build the (relative) URL according to the requested URL path. Another approach is to hard-encode a <base> href Docs in the overall template.
Another alternative is that you get the output of the rendered templates, parse the links and make them suit.
But the important part is that you need to know about the requested URL path in specific and how your template (blocks) are being used.
With absolute path as Joseph said:
<img src="/img/logo.png">
you can see the images only if your website is on a root url as
http://localhost/
it won't work on
http://localhost/myApp/
so in this case you'll need to create an host for it
http://myApp/
A template is WYSIWYG when you can see how it looks in your browser or in your html editor, so basically any templates that use relative paths.
RainTPL had the awesome idea to replace automatically the relative paths of the templates with the correct server path (relative or absolute), so you can see immediately how your template looks.
Another very good way to use WYSIWYG templates is the <base href="http://localhost/myApp/"> tag, which enables you to use relative paths. Only problem is the cross browsing and the Javascript because is not very clear if works the same in all of them.
<img src="{{ asset('img/my_image.gif') }}" alt="something" />
The asset path will resolve to the /web directory. In my example the full project path for the image would be:
Project/web/img/my_image.gif
You'll need to be using the .twig extension to use this method.
I'm new to PHP and I'm having a problem when trying to link my CSS files using include.
Basically I need my files to link back to a certain directory no matter how far down the file is. I have tried using
<?php
include $_SERVER['DOCUMENT_ROOT'] . '/sysprogs/required/header.html';
?>
But header.html contains the links to my css files so the directory it ends up looking for the css files in is
http://localhost/SysProgs/software/CSS/style.css
instead of where I want it to go to which is
http://localhost/SysProgs/required/CSS/style.css
I hope that made sense and I hope you can help me
Thankyou for all your help everyone!
I would definitely not use <base>. I've run into many problems with this before. If you use <base>, ALL of your links will become relative to that base value.
Instead, I would recommend setting PHP constants for common directories. For example:
PHP Code:
<?php
define('CSS_DIR', '/SysProgs/required/CSS/');
?>
HTML Code:
<link href="<?php echo CSS_DIR ?>style.css" rel="stylesheet" type="text/css" />
One Idea
Use the full URL in header.html. This will be unambiguous and robust.
<head>
<link href="/FULL_BASE_URL/style/style.css" rel="stylesheet" type="text/css" />
</head>
Another Idea
Use the <base> header tag. This allows you to specify a base URL for links, including CSS, and may require the least work in the short term (see note below).
<head>
<base href="FULL_BASE_URL" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
More at w3schools
Note: As is noted in the comments below base may ultimately cause more confusion than it is worth.
I like to define both an absolute path and a webroot in a central place in your application:
<?php
define("APP_WEBROOT", "/myapp");
define("APP_ROOTDIR", "/home/www/example.com/htdocs/myapp");
?>
you can then "absolutize" the correct links like so:
<?php echo APP_WEBROOT; ?>/software/CSS/style.css
I prefer this
over <base> because that tag creates confusion and makes code harder to maintain in the long run
over using absolute paths /software/CSS/style.css because those make you unable to install your application in a subdirectory of your choice: You will always be bound to the root directory.
I run into this problem a lot when designing sites. When I have custom CMS, I use the following:
$basedir = "root_directory/";
$basedirPHP = $_SERVER['DOCUMENT_ROOT'].$basedir;
$basedirHTML = "http://".$_SERVER['SERVER_NAME'].$basedir;
I define $basedir so I can move the site to different subdirectories in the server without any effort. The $basedirPHP and $basedirHTML are so I can call on files either with php, or like you mentioned, when linking CSS, JS, etc.
If you're on wordpress, just use the good ol' bloginfo('template_directory'); to do the same in template files.
The first thing for you to understand, is your question has nothing PHP related. It is as simple as just filenames in your HTML questuon. Without PHP it will remain the same. Just use absolute path to your CSS file
And another thing to think of: consider to accept some questions.
i am new to a php site, only familiar with .net web forms sites.
i can't figure out how routing is working on this php site.
www.oursite.com/suggestions.php is to suggestions.php
www.oursite.com/suggestions also loads the php fine
www.oursite.com/suggestions/ loads the php, but no css is applied
www.oursite.com/suggestions/anything - anything that comes after the '/' is ignored and suggestions is loaded without css. so oursite.com/suggestions////// works, as does oursite.com/suggestions/2/2/2/2/whatever
i have searched but not found any good explanation on how this is working. can someone explain or provide a good resource?
thank you.
This is most certainly done using Mod_Rewrite, an Apache extension. You'll probably find a file called .htaccess in the public root, in which these rewriting rules are defined.
DouweM has the right answer as far as the friendly urls are concerned.
As for the CSS, it is probably because you are using relative URLs in your link tags:
<link rel="stylesheet" href="site.css"/>
Change those to absolute URLs and it should solve that problem:
<link rel="stylesheet" href="/site.css"/>
The reason for this is that the browser makes the request for the CSS based on the directory it thinks it is in, even though your URL rewriting is changing that. So, if the url is http://mysite.com/suggestions/ and you are using relative urls, the browser will request the css as http://mysite.com/suggestions/site.css which of course doesn't exist.
www.oursite.com/suggestions.php is to suggestions.php
www.oursite.com/suggestions also loads the php fine
You probably have a .htaccess file that first checks whether or not a file of that name exists, and if it does serves it, then, if it doesn't, tries to route it to a php script.
www.oursite.com/suggestions/ loads the php, but no css is applied
The / means your browser considers '/suggestions/' a directory. If suggestions.php outputs HTML that contains a relative <link> to a stylesheet, e.g. <link href="style.css">, your browser will request www.oursite.com/suggestions/style.css, rather than www.oursite.com/style.css as in the previous two cases.
www.oursite.com/suggestions/anything
Same as the previous case, your browser will request the wrong css file, since it considers '/suggestions/' a directory. (For a potential fix, take a look at Eric Petroelje's answer.)
As DouweM said, though, your best bet is to look directly at your .htaccess file and figure out what it does.