How to get absolute path for stylesheet or javascript files.
<?php echo $this->Html->css('/css/main.css');?>
Is giving URL
<link rel="stylesheet" type="text/css" href="/dev/theme/Default/css/main.css" />
And I am looking for
<link rel="stylesheet" type="text/css" href="http://localhost/dev/theme/Default/css/main.css" />
I'm really wondering why you would want to do so if the CSS files are served on the same domain as your website, but this will probably work;
<?php echo $this->Html->css($this->Html->url('/css/main.css', true));?>
HtmlHelper::url() (inherited from Helper::url() takes two arguments. The first is the path as a string or array (to make use of cakephp routing), if a Boolean 'true' is passed as its second argument, a 'full' URL is generated.
I'm not at my computer at the moment, so haven't been able to test it, but I think it should work.
update
I had a quick look at the source: https://github.com/cakephp/cakephp/blob/master/lib/Cake/View/Helper/HtmlHelper.php#L431
and HtmlHelper::css() uses Helper::assetUrl() internally;
https://github.com/cakephp/cakephp/blob/master/lib/Cake/View/Helper.php#L305
So this may work as well and if it works, it's a cleaner solution:
<?php echo $this->Html->css('main', null, array('fullBase' => true));?>
Related
Migrating from 2.3.x to 3.8 and I can't figure out how I may access the public path to webroot in my views. Previously I could do something like this:
<link rel="stylesheet" type="text/css" href="<?php echo $this->webroot ?>wp-dist/acd76cde.css" />
But when I try this on 3.8 it says:
Error: webrootHelper could not be found.
I tried html helper, but can't find a helper method which gives just the public path to webroot. For example image() is relative to webroot/img, css() is relative to webroot/css and so on.
Am I missing something?
You're on the right track, you should be using the HTML helper.
For CSS:
<?= $this->Html->css('wp-dist/acd76cde.css'); ?>
Just FYI, internally this is using the options defined in config/app.php:
$pathPrefix = Configure::read('App.cssBaseUrl');
So in theory if you needed the same paths manually, you could read them out of the configs too - but you should just stick with the HTML Helper this is exactly what it's for.
From the Docs:
https://book.cakephp.org/3/en/views/helpers/html.html#linking-to-css-files
https://book.cakephp.org/3/en/views/helpers/html.html#inserting-well-formatted-elements
https://book.cakephp.org/3/en/development/configuration.html#general-configuration
Update:
As #ndm said in the comments above, the following works for me as well.
echo $this->Html->css('lightweight_lpbbd374e3', ['pathPrefix' => 'wp-dist/']);
Original my solution, which works too
$this->Url->webroot finally worked for me. So I'm including my css as follows:
<link rel="stylesheet" type="text/css" href="<?php echo $this->Url->webroot('wp-dist/lightweight_lpbbd374e3.css'); ?>" />
Until someone else suggests a better way, I'll continue using this.
I can't seem to get the thumbnails I have placed on this page to open in the lightbox:
http://prussellartist.com/custom-leather-dog-collar-gallery2.htm
I tried changing the order and placement of these 2 elements:
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="dist/js/lightbox.js"></script>
At a glance is there anything wrong?
Please take a look at the JavaScript errors ... It seems like you forgot the fourth step of the getting-started guide (http://lokeshdhakar.com/projects/lightbox2/#getting-started) - namely - to include jQuery.
I am using ajax in my cakephp application by using JS helper.so I do not required to write jquery code.
Js helper automatically add the code in my file.Following is the line by which JS helper write the code.
echo $this->Js->writeBuffer(array('cache'=>true));
When I set the true value of cache attribute,every time a new js file created in js folder and a new script is added in my code in following manner.
<script type="text/javascript" src="filename.js"></script>
But when I change the cache value to false,all the js code added in my file line by line.
Now my question is, which way is best way by which,page execution fast.
And my second question is that when I set true value of the cache, js file add only once, right now js helper add the js file again and again,when page is reload or refresh.
For the record this question could have been worded far better.
First question, execution speed: Saving a new file for every bit of JS probably isn't the way to go. Hopefully the code below should explain a better way and render your second question moot.
// In /app/View/Layouts/default.ctp
...
<head>
...
<?php echo $this->fetch('script'); ?>
...
</head>
<body>
...
<?php echo $this->Js->writeBuffer();
...
</body>
Once that's in place, you can add a script file to your views or layouts with
<?php echo $this->Html->script('scriptname', array('inline'=>false)); ?>
(note no .js extension)
Or add custom Js:
<?php
$customJs = "alert('Hi!');";
echo $this->Html->scriptBlock($customJs, array('inline'=>false));
?>
Hope that helps.
hope sombody can enlighten me here,
i am writing a joomla template.
ie7 has a seperate css using:
<!--[if IE 7]>
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_ie7.css" type="text/css" />
<![endif]-->
but is also loads the non ie7 css and accepts its styles, so nothing get fixed....
does anybody know what to do?
thanks,
Jonatahn
Using conditional css loading this way is not (at least for me) the best way to handle this situation.
As you are writing a template you can acces to the $_SERVER['HTTP_USER_AGENT'] variable in order to determine if the iExplorer (or any other) css is needed and then use php to filter it's load
<?php
if(stripos ( $_SERVER['HTTP_USER_AGENT'], "MSIE 7.0") > 0 ){
/* LOAD IE7 CSS here */
}else{
/* LOAD normal CSS here */
}
?>
This way you can load the IE7 css ONLY.
How do you link css files and javascript/jquery files to a controller/view??
I am using CakePHP_1.3 and have located the following code online, but I cant seem to figure out where to put this, and secondly, where to place the css file named css_file.
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
Any help appreciated guys...
You would put the CSS file in:
app/
webroot/
css/ <-- here
You would put the line of code in your default.ctp layout. This is located in (1.3):
cake/
libs/
view/
layouts/
default.ctp <-- copy this to app/views/layouts/
Then open that up app/views/layouts/default.ctp and look at the HTML. You'll see where Cake is already using this command. Simply replace the filename with the file you added. Do not add the .css to the end when you add the line of code.
you use echo $this->Html->css('css_file_name_without_the_extension'); and echo $this->Html->script('same') in the view
Based on your question, it sounds like you were asking how to do this on a view-by-view basis.
This is where $scripts_for_layout comes in useful.
You just need to make sure that it's in your <head> tag in /app/views/layouts/default.ctp as <?php echo $scripts_for_layout; ?>
Then, you can literally add the code you included in your question into any of your views, at literally any point you like. Because you have 'inline' => false it won't actually appear at that position in the view:
<?php $this->Html->css("css_file", null, array("inline"=>false)); ?>
...and you'll find that css_file.css is automatically linked in your <head> whenever that particular view is loaded. This is a great way to only load specific CSS files on a per-view basis when they're needed, yet make sure they appear in the <head> tag where they should be.
This also works for JavaScript as follows:
<?php $this->Html->script("js_file", null, array("inline"=>false)); ?>
If you want to have one or more CSS files loaded in all views, just put a shortened version your code in the <head> of default.ctp as follows:
<?php echo $html->css(array('each','one','of','your','css','files'));
Or, again, for JavaScript:
<?php echo $html->script(array('each','one','of','your','js','files'));
Don't include the .css or .js extension in the array.